从文件读取文本时强制调整大小
建议的重复是我在哪里得到这个问题的基础，所以它不是一个重复！事实上，我从一开始就和这个问题联系在一起.
好编辑：
我做了一个JSFiddle (第一次:)。请注意，textarea并没有按您的意愿展开。在textarea中键入一些内容，它将立即调整大小。
如果我们能自动发送按键事件，它可能会工作.(这相关问题没有帮助，答案没有影响)。
我正在使用textarea，就像来自这里的一样。然后，我从一个文件中读取内容，并将内容放入文本框中，但它不会按需要调整大小。
我更新文本框如下：
function updateTextbox(text) {
$('#cagetextbox').val(text);
};有什么想法吗？
我在火狐34.0规范，在Ubuntu12.04，如果这发挥了一些作用，我希望不是这样，因为我的一些用户使用Chrome。
编辑：
一种尝试是写这样的东西：
$('#cagetextbox').attr("rows", how many rows does the new text contain);注意，如果我们尝试找出文本区域有多少行文本包含，我们将得到1作为一个答案。
EDIT_2
也许有点像width/(length_of_line * font_size)。对于一些测试，如果我减去1(当然只保留结果的整数部分)，它似乎是正确的。
回答 3
Stack Overflow用户
发布于 2015-04-30 12:34:42
您的textArea没有更新高度本身，即使在它上触发“input.textarea”时也是如此，因为这个值是未定义的：
this.baseScrollHeight它只在文本区域的“焦点”之后定义。
我稍微修改了您的代码：http://jsfiddle.net/n1c41ejb/4/
所以，关于“输入”
$(document).on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this);
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});并将baseScrollHeight计算移到单独的函数中。
function calcBaseScrollHeight(textArea) {
var savedValue = textArea.value,
baseScrollHeight;
textArea.value = '';
baseScrollHeight = textArea.scrollHeight;
textArea.value = savedValue;
return baseScrollHeight;
}然后这样调用您的updateTextBox：
$('#cagetextbox').val(text).trigger('input.textarea');Stack Overflow用户
发布于 2015-04-30 13:25:58
您可以使用以下代码来调整元素的高度，在您的示例中是textarea。虽然它确实使用了一个循环，但它避免了这样的几个显示和滚动问题。
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight'));
}调整您喜欢的任何事件的大小。
$("#cagetextbox").on("keyup change", function (e) {
autoheight(this);
});和/或当事件未被触发时，自动调用它自己。
function updateTextbox(text) {
$('#cagetextbox').val(text);
autoheight($("#cagetextbox"));
};Stack Overflow用户
发布于 2015-04-30 14:57:47
我发明了一把有用的小提琴。它创建一个输入文本字段，就像它显示在不可编辑的div中一样。
https://jsfiddle.net/khgk7nt5/2/
示例CSS
.test{
font-family:"Times New Roman", Times, serif;
font-color:#CCCCCC;
font-size:20px;
width:300px;
}
.testLoc{
position:absolute;
top:-1000px;
}JavaScript
var testText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore"
var test = $("<div/>");
test.addClass("test testLoc");
test.text(testText);
$("body").append(test);
var out = $("<textarea/>");
out.addClass("test");
out.width(test.width());
out.height(test.height());
out.val(testText);
$("body").append(out);
test.remove();https://stackoverflow.com/questions/29930300
复制相似问题
腾讯云开发者
