我需要一个文本区域，我在框中输入我的文本，它会根据需要增加长度以避免必须处理滚动条，并且在删除文本后它需要缩小！ 我不想走 mootools 或 jquery 路线，因为我有一个轻量级的表单。
【问题讨论】：
标签： javascript
确定一个宽度并检查一行可以容纳多少个字符，然后为每个按下的键调用一个看起来像这样的函数：
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';
}
没有测试过代码。
【讨论】：
我认为没有任何方法可以获取 variable-width 字体中的文本宽度，尤其是在 javascript 中。
我能想到的唯一方法是制作一个由 css 设置可变宽度的隐藏元素，将文本放入其 innerHTML，并获取该元素的宽度。所以你也许可以应用这个方法来处理 textarea 自动调整大小的问题。
【讨论】：
您可以通过使用 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 );
}
【讨论】：
您可以通过设置1px然后读取scrollHeight属性来检查内容的高度：
function textAreaAdjust(element) {
element.style.height = "1px";
element.style.height = (25+element.scrollHeight)+"px";
}<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>它可以在 Firefox 3、IE 7、Safari、Opera 和 Chrome 下运行。
【讨论】：
height='auto' 设置为 scrollHeight 之前设置它，那么它会按预期工作，根据需要缩小。
您也可以尝试将contenteditable 属性添加到普通的p 或div。不是真正的textarea，但它会在没有脚本的情况下自动调整大小。
.divtext {
border: ridge 2px;
padding: 5px;
width: 20em;
min-height: 5em;
overflow: auto;
}<div class="divtext" contentEditable>Hello World</div>【讨论】：
white-space: pre; 设置。
.divtext:hover { cursor:text; } 悬停时添加一个光标。就我而言，我还修改了 .divtext:focus 类以在聚焦文本框时更改背景颜色。
<pre><code contentEditable [textContent]="sqlContent"></code></pre>
使用此功能：
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 的回答在 Safari 中对我来说都不太适用，但在稍作修改后就可以了：
function textAreaAdjust(o) {
o.style.height = "1px";
setTimeout(function() {
o.style.height = (o.scrollHeight)+"px";
}, 1);
}
希望这对某人有所帮助
【讨论】：
已经实现了一个jquery解决方案，源代码在github上：https://github.com/jackmoore/autosize。
【讨论】：