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

Question

重复的建议是我从哪里得到这个问题的基础的问题，所以它不是重复的！事实上，我已经从一开始就链接到那个问题...

编辑良好：

我做了一个 JSFiddle（我的第一次 :)）。注意 textarea 并没有像人们希望的那样展开。在文本区域内输入内容，它会立即调整大小。

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

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

我这样更新文本框：

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

有什么想法吗？

我使用的是 firefox 34.0 canonical，在 Ubuntu 12.04，如果它起作用的话，我希望不是这样，因为我的一些用户使用 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

它只在文本区域的 'focus' 之后定义。

我稍微修改了你的代码：http://jsfiddle.net/n1c41ejb/4/

所以，在 'input'

    $(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

您可以使用以下代码调整元素的高度，在您的例子中是文本区域。虽然它确实使用了一个循环，但它通过这种方式避免了一些显示和滚动问题。

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);
});

And/or当事件没有触发时自动调用自己。

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

Fiddle

Answer 3

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

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

Force resizement when reading text from file

javascript

css

debugging

autoresize