如何自动调整textarea的高度?

时间:2010-12-28 17:49:01

标签: javascript html textarea

我将textarea的宽度设置为100%,但现在我需要知道一行中可以容纳多少个字符。

我正在尝试编写一个javascript函数来自动生成/缩小textarea。我正试图不使用jquery,因为我只需要这个函数。

我的逻辑是rows = textarea.value.split('\n'),遍历rowscount += rows[i].length/textarea.cols,然后是count += rows.length,最后是textarea.rows = count。唯一的问题是count太大,因为textarea.cols太小了。

2 个答案:

答案 0 :(得分:2)

此函数将元素的高度(在您的情况下为textarea)设置为浏览器的默认高度。如果这导致出现滚动条,则高度将切换到实际需要的高度。

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

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

答案 1 :(得分:1)

试试这个并享受:

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>