Textarea根据内容长度调整大小

Question

Textarea根据内容长度调整大小

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

Answer 1

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

它适用于Firefox 3,IE 7,Safari,Opera和Chrome.

这是一个非常相似的答案:http://stackoverflow.com/a/5346855/124946如果我们在设置`scrollHeight`之前设置'height ='auto'`,那么它按预期工作,根据需要缩小. (7认同)
如果您的文本区域太高并在页面上生成滚动**并且**您碰巧使页面向下滚动，则当您“高度 = 1px”时，这会将滚动位置重置为顶部。为了避免这种情况，您可以暂时将高度分配给文本区域的父级。 (2认同)
当 textarea 变得比视口高时，这会出现问题。在那种情况下，当 textarea 增长时，它会变得紧张。否则相当不错。 (2认同)

Answer 2

bil*_*ong 46

您也可以尝试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>

Run Code Online (Sandbox Code Playgroud)

但是,这会在粘贴时添加所有HTML垃圾. (10认同)
如果 textarea 是只读的，则此解决方案很棒。（这种情况 contentEditable 可以省略）我还将添加 `white-space: pre;` 设置。 (3认同)

Answer 3

Rav*_*lya 10

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

Answer 4

Haz*_*m_M 7

使用此功能:

function adjustHeight(el){
    el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px";
}

Run Code Online (Sandbox Code Playgroud)

使用这个html:

<textarea onkeyup="adjustHeight(this)"></textarea>

Run Code Online (Sandbox Code Playgroud)

最后使用这个css:

textarea {
min-height: 60px;
overflow-y: auto;
word-wrap:break-word
}

Run Code Online (Sandbox Code Playgroud)

解决方案只是让滚动条显示检测到需要调整高度,并且只要滚动条出现在文本区域中,它就会调整高度,以便再次隐藏滚动条.

Answer 5

小智 5

无论出于何种原因,Alciende的回答在Safari中对我来说并不是很有效,但经过一些小修改之后做了一遍:

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

Run Code Online (Sandbox Code Playgroud)

希望这有助于某人

归档时间：	16 年，8 月前
查看次数：	207119 次
最近记录：	9 年，4 月前