文本数量在页面加载时未正确调整大小的文本区域

Question

我有一个文本区域，我想在页面加载时展开/调整大小，这样它就可以显示框中的所有文本。

但我的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/