基于内容长度调整大小的Textarea
基于内容长度调整大小的Textarea
提问于 2009-06-15 09:16:08
我需要一个文本区，我在框中键入我的文本，它的长度根据需要增长，以避免不得不处理滚动条，它需要在删除文本后收缩！我不想走mootools或jquery的路线，因为我有一个轻量级的表单。
回答 7
Stack Overflow用户
回答已采纳
发布于 2009-06-15 10:21:02
您可以通过设置为1px，然后读取scrollHeight属性来检查内容的高度：
function textAreaAdjust(element) {
element.style.height = "1px";
element.style.height = (25+element.scrollHeight)+"px";
}<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
它可以在火狐3，IE 7，Safari，Opera和Chrome下运行。
Stack Overflow用户
发布于 2009-06-15 10:24:37
您也可以在普通的p或div上尝试contenteditable属性。不是真正的textarea，但它可以在没有脚本的情况下自动调整大小。
.divtext {
border: ridge 2px;
padding: 5px;
width: 20em;
min-height: 5em;
overflow: auto;
}<div class="divtext" contentEditable>Hello World</div>
Stack Overflow用户
发布于 2013-06-23 18:49:44
使用此函数：
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
}解决方案很简单，就是让滚动条显示来检测需要调整的高度，每当滚动条出现在文本区域时，它就会调整高度，就像再次隐藏滚动条一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/995168
复制相关文章
相似问题