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

Question

建议的副本是我得到这个问题的基础的问题,所以它不是重复的!事实上,我从一开始就已经把这个问题联系起来了......

---

好的编辑:

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

如果我们可以自动发送按键事件,它可能会工作......(这个相关问题没有帮助,答案没有效果).

---

我在这里使用textareaas as .然后,我从一个文件中读取并将内容放在文本框中,但它没有按原样调整大小.

我像这样更新文本框:

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

有任何想法吗？

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

---

编辑:

尝试写这样的东西:

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

请注意,如果我们试图找出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');