Textarea在页面加载时不能正确调整文本的大小

Question

我有一个textarea，我想在页面加载时展开/重新调整大小，以便显示框中的所有文本。

但我的JavaScript不是那么好。下面的代码片段在我有“\ n”或“\ r”或“\ r \ n”时有效，但如果我只是输入到框的结尾并且文本在下一行继续，则不能正确计算（包装），所以没有\ r，\ n或\ r \ n。所以高度不能正确计算。

有谁知道更好的解决方案或如何解决这个问题？

function getTextAreaHeight(elementValue) { 
 
    var text = elementValue; 
 
    var lines = text.split(/\r|\r\n|\n/); 
 
    var count = lines.length; 
 
    var height = count * 30; 
 
    return height + 'px'; 
 
}; 
 

 

 
var height = getTextAreaHeight($("#profileCatchPhrase").val()); 
 
$('#profileCatchPhrase').css('height', height);

编辑不会这项工作???

$('#profileCatchPhrase').css('height', $('#profileCatchPhrase').scrollHeight);

Answer 1

这有一些有用的提示，如果你愿意使用jQuery +插件，或者您可以使用带有contenteditable一个div：

https://css-tricks.com/textarea-tricks/

Answer 2

你应该首先创建一个幽灵文本框，并将内容和样式复制到幽灵文本框中。然后，将幽灵文本框的高度设置为0.然后，您可以通过scrollHeight获取文本框内容高度。

这里有一个例子：https://jsfiddle.net/majvwvcm/6/