Textarea 将根据内容长度调整规模

我需要一个文本区域，我在框中键入我的文本，它增长的长度需要避免处理滚动条，它需要在删除文本后收缩！ 我不想沿着 mootools 或 jquery 的路线走下去，因为我有一个轻量级的表单。

305657 次浏览
小开

确定一个宽度并检查一行可以容纳多少个字符，然后对于每个按下的键，调用一个看起来像这样的函数:

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';
}

还没有测试代码。

小开

我不认为有任何方法可以得到宽度的文本在 可变宽度字体，特别是在 javascript。

我能想到的唯一方法是创建一个隐藏元素，该元素的宽度由 css 设置，将文本放入其 innerHTML 中，然后得到该元素的宽度。因此，您可以应用此方法来处理 textarea 自动调整大小的问题。

小开

您可以通过使用 span 和 textarea 来实现这一点。

每次更改文本时，都必须使用 textarea 中的文本更新 span。然后将 textarea 的 css width 和 height 设置为 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>

It works under Firefox 3, IE 7, Safari, Opera and Chrome.

小开

您也可以尝试 contenteditable属性到一个正常的 p或 div。不是真正的 textarea，但它会自动调整大小没有脚本。

.divtext {
border: ridge 2px;
padding: 5px;
width: 20em;
min-height: 5em;
overflow: auto;
}
<div class="divtext" contentEditable>Hello World</div>

小开

使用此功能:

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
}

解决方案就是让滚动条显示出需要调整的高度，当滚动条出现在文本区域时，它调整高度的幅度与再次隐藏滚动条的幅度一样大。

小开

不管出于什么原因，阿尔西恩德的回答刚才在 Safari 中并没有完全奏效，但经过小小的修改后奏效了:

function textAreaAdjust(o) {
o.style.height = "1px";
setTimeout(function() {
o.style.height = (o.scrollHeight)+"px";
}, 1);
}

希望这对谁有帮助

小开

已经实现了一个 jquery 解决方案，并且可以在 github 中获得源代码: https://github.com/jackmoore/autosize。


提交答案