如何自动调整文本区域的高度？

Question

我将文本区域的宽度设置为 100%，但现在我需要知道一行可以容纳多少个字符。

我正在尝试编写一个 JavaScript 函数来自动增大/缩小文本区域。我试图避免使用 jquery，因为我只需要这个函数。

我的逻辑是

rows = textarea.value.split('\n')

，迭代

rows

和

count += rows[i].length/textarea.cols

，然后

count += rows.length

，最后

textarea.rows = count

。唯一的问题是

count

太大，因为

textarea.cols

太小。

Answer 1

此函数会将元素（文本区域，在您的情况下）的高度设置为浏览器的默认高度。如果这导致出现滚动条，高度将切换到实际需要的高度。

function autoHeight(element){
    element.style.height='auto';
    element.style.height=element.scrollHeight+'px';
}

如果您不喜欢浏览器的默认高度，当然可以将其更改为您自己的其他默认值。

Answer 2

尝试一下并享受：

var textarea = document.getElementById("YourTextArea");
var limit = 50; //height limit

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";
};

textarea {
    width: 99%;
}

<textarea id="YourTextArea"></textarea>

Answer 3

建议添加一个计算粗细的步骤，这样可以正确处理输入框上的边框宽度，避免意外滚动。

textarea.oninput = function () {
  textarea.style.height = 'auto'
  const thickness = textarea.offsetHeight - textarea.clientHeight
  textarea.style.height = `${textarea.scrollHeight + thickness}px`
}