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

根据javascript中的文本行数更改textarea的高度,javascript,resize,textarea,height,row-height,Javascript,Resize,Textarea,Height,Row Height,可能重复: 如何根据用户输入的文本行数更改文本区域的高度 对于下面的示例,如果用户将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 n

可能重复:

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

对于下面的示例,如果用户将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>

这是将在浏览器中显示的默认文本。当您更改此文本并添加更多行时,浏览器不会更改此文本所在文本区域的高度,而是会添加一个滚动条,这不是我想要的。

函数自动调整大小(ele)
{
ele.style.height='auto';
var newHeight=(ele.scrollHeight>32?ele.scrollHeight:32);
ele.style.height=newHeight.toString()+'px';
}

调整“32”以匹配行高只是一个练习。

它不起作用:问题是JSFIDLE,而不是脚本。来自Chrome:“不安全的JavaScript试图从带有URL的框架访问带有URL的框架。域、协议和端口必须匹配。”跨站点脚本错误,多么奇怪。Oops,一个小补充:为了解决Webkit上的问题,“溢出-y:隐藏”应该添加到textarea Styleing.Down-vote中,用于贬损性评论。不要忘了调整填充。似乎scrollHeight包括顶部和底部填充。@FelixKling,前提是我们假设OP使用的是原型,而他从未提到过原型。
<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';
}