根据javascript中的文本行数更改textarea的高度

时间:2010-12-23 06:36:15

标签: javascript resize textarea height row-height

  

可能重复:
  Autosizing textarea using prototype

如何根据用户放入文本行的文本行数更改文本区域的高度?

对于下面的示例,如果用户将textarea中的文本更改为多行文本,则textarea会在其自身上放置滚动条而不是更改其高度以适合行数。

<textarea>
This is the default text that will be displayed in the browser. When you change this text and add more lines to it the browser will not change the height of the textarea that this text is in rather it will add a scroll bar, which is not what I want.
<textarea>

1 个答案:

答案 0 :(得分:2)

<textarea onkeyup="autoSize(this);"></textarea>

function autoSize(ele)
{
   ele.style.height = 'auto';
   var newHeight = (ele.scrollHeight > 32 ? ele.scrollHeight : 32);
   ele.style.height = newHeight.toString() + 'px';
}

调整“32”以匹配行高作为练习。