javascript - 查询 - 将 从文本区域传递到隐藏的 div 以自动调整大小

Question

我编写了一个小 jquery 来在您键入时调整文本区域的大小，除非我使用换行符，否则它工作正常。

function resize() {
    var value = $('textarea').val();
    var div = $('div');
    div.html(value);

    var height = div.height();
    /// etc. 
}

<div style="display: none;"></div>
<textarea></textarea>

文本区域和 div 具有相同的字体和所有内容，因此它们完美对齐并且文本区域相应地调整大小，但是当我使用换行符(例如:“one<br />two ”)时，div 的输出会忽略它( “one two”)。如何使其包含换行符？

Answer 1

查看我的 fiddle 完整代码:http://jsfiddle.net/billccn/8kgpc/1/ 。我使用的两个技巧:

• 使用 <pre>所以换行符被保留
• 在测量过程中添加新行，以便文本区域中始终有额外的空间

核心代码很简单:

$(this).height($('pre').text(this.value + '\na').height());

在 fiddle 中，我更改了文本大小以表明它在这种情况下仍然有效。