Question

建议的副本是我获得此问题基础的问题，因此不重复！事实上，我已经从一开始就链接到了这个问题......

良好的编辑：

我做了JSFiddle（我的第一次:)）。注意textarea如何不按照人们的意愿扩展。在textarea中键入内容，它会立即调整大小。

如果我们可以自动发送按键事件，它可能会有效......（this相关问题没有帮助，答案没有效果。）

我使用的textarea来自here。然后，我从一个文件中读取并将内容放在文本框中，但它没有按原样调整大小。

我像这样更新文本框：

function updateTextbox(text) {
  $('#cagetextbox').val(text);
};

有什么想法吗？

我在Ubuntu 12.04上使用firefox 34.0规范，如果它扮演某个角色，我希望不是这样，因为我的一些用户使用Chrome。

编辑：

尝试写下这样的东西：

$('#cagetextbox').attr("rows", how many rows does the new text contain);

请注意，如果我们尝试find out how many lines of text the textarea包含，我们将获得1作为答案。

EDIT_2

也许像width/(length_of_line * font_size)这样的东西。对于一些测试，它似乎是正确的，如果我减去1（当然只保留结果的整数部分）。

Answer 1

即使你触发'input.textarea'，你的textArea也没有更新高度，因为这个值是未定义的：

this.baseScrollHeight

它只在textarea'焦点'之后定义。

我稍微修改了您的代码：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');

Answer 2

您可以使用以下代码调整元素的高度，在您的情况下是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"));
};

Fiddle

Answer 3

我创造了一个工作小提琴。它创建一个输入文本字段，就像它在不可编辑的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();

从文件中读取文本时强制调整大小

3 个答案: