Question

我需要一个textarea，我在框中键入我的文本，它根据需要增长，以避免必须处理滚动条，它需要在删除文本后收缩！我不想沿着mootools或jquery路线走，因为我有一个轻量级的形式。

Answer 1

您可以通过设置为1px然后阅读scrollHeight属性来检查内容的高度：

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

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

适用于Firefox 3，IE 7，Safari，Opera和Chrome。

Answer 2

您也可以尝试contenteditable属性到普通p或div。不是textarea，但它会在没有脚本的情况下自动调整大小。

<!DOCTYPE html>
<style>
.divtext {
    border: ridge 2px;
    padding: 5px;
    width: 20em;
    min-height: 5em;
    overflow: auto;
}
</style>

<div class="divtext" contentEditable>Hello World</div>

Answer 3

已经实现了一个jquery解决方案，源代码可以在github上找到：https://github.com/jackmoore/autosize。

Answer 4

使用此功能：

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
}

解决方案只是让滚动条显示检测到需要调整高度，每当滚动条出现在文本区域时，它就会调整高度，以便再次隐藏滚动条。

Answer 5

Alciende的答案在Safari中对我来说不是很有用，无论出于何种原因，但经过一些小修改之后做了：

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

希望这有助于某人

Answer 6

我认为没有办法在可变宽度字体中获取文本宽度，尤其是在javascript中。

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

Answer 7

您可以使用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 );
}

Answer 8

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

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

没有测试过代码。

Answer 9

一种方法是在没有JavaScript的情况下执行此操作，如下所示：

    <textarea style="overflow: visible" />

Textarea根据内容长度调整大小

9 个答案: