Textarea根据内容长度resize
我需要一个textarea，我在文本框中键入我的文本，它的长度根据需要增长，以避免必须处理滚动条，它需要在删除文本后缩小！ 我不想下去mootools或jQuery的路线，因为我有一个轻量级的forms。
您可以通过设置为1px然后阅读scrollHeight属性来检查内容的高度：
function textAreaAdjust(o) { o.style.height = "1px"; o.style.height = (25+o.scrollHeight)+"px"; }
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
你也可以尝试contenteditable属性到正常的p或div 。 不是一个真正的textarea但它会自动resize没有脚本。
<!DOCTYPE html> <style> .divtext { border: ridge 2px; padding: 5px; width: 20em; min-height: 5em; overflow: auto; } </style> <div class="divtext" contentEditable>Hello World</div>
一个jQuery解决scheme已经实现，源代码可以在github上find： https ： //github.com/jackmoore/autosize 。
使用这个function：
function adjustHeight(el){ el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px"; }
使用这个html：
<textarea onkeyup="adjustHeight(this)"></textarea>
最后使用这个CSS：
textarea { min-height: 60px; overflow-y: auto; word-wrap:break-word }
解决方法就是让滚动条出现，检测高度是否需要调整，每当滚动条出现在文本区域时，调整高度就像再次隐藏滚动条一样。
对于我来说，Alciende的答案对于我来说并不是什么理由，但是在做了一个小小的修改之后：
function textAreaAdjust(o) { o.style.height = "1px"; setTimeout(function() { o.style.height = (o.scrollHeight)+"px"; }, 1); }
希望这有助于某人
一种方法是没有JavaScript，这是这样的：
<textarea style="overflow: visible" />
我不认为有什么办法来获取可变宽度字体的文本宽度 ，特别是在JavaScript中。
我能想到的唯一方法是创build一个隐藏的元素，其宽度由css设置，将文本放入其innerHTML中，并获取该元素的宽度。 所以你可以应用这个方法来处理textarea自动resize的问题。
你可以通过使用span和textarea来实现这一点。
每次更改文本时，都必须使用textarea中的文本更新跨度。 然后将textarea的css宽度和高度设置为span的clientWidth和clientHeight属性。
例如：
.textArea { border: #a9a9a9 1px solid; overflow: hidden; width: expression( document.getElementById("spnHidden").clientWidth ); height: expression( document.getElementById("spnHidden").clientHeight ); }
确定一个宽度，并检查一行可以容纳多less个字符，然后对每个按下的键调用一个如下所示的函数：
function changeHeight() { var chars_per_row = 100; var pixles_per_row = 16; this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + 'px'; }
没有testing代码。
