从文件读取文本时强制调整大小 [英] Force resizement when reading text from file

问题描述

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

---

GOOD EDIT：

我制作了一个 JSFiddle （ 我的第一次 ：） ）。注意textarea没有按照希望展开。

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

< hr>

我使用 textarea 作为这里。然后，我从一个文件读取，我把内容放在文本框内，但它不调整大小，因为它应该。

我更新文本框像这样：

  function updateTextbox（text）{
 $（'＃cagetextbox'）。val 
}; 
  

任何想法？

firefox 34.0 canonical，在Ubuntu 12.04，如果这起到一些作用，我希望不是这样，因为我的一些用户使用Chrome。

---

编辑：

尝试写下如下内容：

  $（'＃cagetextbox'）。attr（rows，新文本包含多少行）; 
  

请注意，如果我们尝试了解textarea 包含多少行文本，我们将得到1作为答案。

---

EDIT_2

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

解决方案

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

  this.baseScrollHeight 
  

只有在textarea上有一个'focus' / p>

我已经修改了您的代码一点： 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'）; 
  

The duplicate suggested is the question where I got the basis for this question, so it is not a duplicate! As a matter of fact, I already have linked to that question from the start...

---

GOOD EDIT:

I made a JSFiddle ( my first time :) ). Notice how the textarea does not expand as one would wish. Type something inside the textarea and it will get resized immediately.

If we can automatically send a keypress event, it may work... (this relevant question did not help, the answers had no effect).

---

I am using the textarea as is from here. Then, I read from a file and I am putting the content inside the textbox, but it doesn't get resized as it should.

I update the textbox like this:

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

Any ideas?

I am on firefox 34.0 canonical, at Ubuntu 12.04, if that plays some role, which I hope is not the case, since some of my users use Chrome.

---

EDIT:

An attempt would be to write something like this:

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

Note that if we try to find out how many lines of text the textarea contains, we will get 1 as an answer.

---

EDIT_2

Maybe something like width/(length_of_line * font_size). For a few tests, it seems to be correct, if I subtracted 1 (by keeping only the integer part of the result of course).

解决方案

Your textArea didn't update the height itself even when you trigger the 'input.textarea' on it because this value is undefined:

this.baseScrollHeight

It's only defined after a 'focus' on the textarea.

I have modified your code a little bit: http://jsfiddle.net/n1c41ejb/4/

so, on '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;
    });

and move the baseScrollHeight calculation to a separate function

function calcBaseScrollHeight(textArea) {
    var savedValue = textArea.value,
        baseScrollHeight;
    textArea.value = '';
    baseScrollHeight = textArea.scrollHeight;
    textArea.value = savedValue;
    return baseScrollHeight;
}

then call your updateTextBox like this:

$('#cagetextbox').val(text).trigger('input.textarea');

这篇关于从文件读取文本时强制调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！