根据内容长度调整大小的文本区域

IT技术 javascript
2021-01-28 01:41:55

我需要一个 textarea 在框中输入我的文本，它会根据需要增加长度以避免处理滚动条，并且需要在删除文本后缩小！我不想走 mootools 或 jquery 路线，因为我有一个轻量级的形式。

6个回答

您可以通过设置为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。

关于火狐的问题，可能很快会解决：stackoverflow.com/questions/47817/...
2021-03-21 01:41:55
这是一个非常相似的答案：stackoverflow.com/a/5346855/124946如果我们height='auto'在将其设置为之前设置正确scrollHeight，那么它会按预期工作，并根据需要缩小。
2021-03-22 01:41:55
当 textarea 变得比视口高时，这会出现问题。在那种情况下，当 textarea 增长时，它会变得紧张。否则相当不错。
2021-03-23 01:41:55
如果你的 textarea 太高并且在页面上产生滚动并且你碰巧让你的页面向下滚动，这将在你 'height = 1px' 时将滚动位置重置到顶部。为了避免它，您可以暂时将高度分配给 textarea 的父级。
2021-03-27 01:41:55
Firefox 中存在一个问题，如果您的用户输入一个很长的单词（没有空格，比 textarea 大），那么“overflow:hidden”将阻止她看到单词的右端。其他浏览器不在乎，因为即使没有空格它们也会换行。您可以通过使用“overflow-y:hidden”来解决此问题，但是您的 css 不符合标准。
2021-03-29 01:41:55

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

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

仍然可以在 '19 使用 angular 7 和 ngx-highlight <pre><code contentEditable [textContent]="sqlContent"></code></pre>
2021-03-23 01:41:55
很棒的解决方案！一项改进使其更像一个文本区域：我会在悬停 div box 时添加一个光标.divtext:hover { cursor:text; }。就我而言，我还修改了.divtext:focus类以在聚焦文本框时更改背景颜色。
2021-03-26 01:41:55
如果 textarea 是只读的，则此解决方案很棒。（这种情况 contentEditable 可以省略）我还要添加white-space: pre;设置。
2021-04-01 01:41:55
请参阅此答案以去除 HTML 垃圾：stackoverflow.com/a/20384452/59087
2021-04-04 01:41:55
但是，这将在粘贴时添加所有 HTML 垃圾。
2021-04-07 01:41:55

使用这个功能：

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
}

解决方案只是让滚动条检测到需要调整高度，并且每当滚动条出现在您的文本区域中时，它都会调整高度，就像再次隐藏滚动条一样。

我知道这是一篇旧帖子，但是当我打印 textarea 时，如果整个内容不适合第一页，则整个内容会转到第二页并在第一页上创建不需要的空格。如何在打印时将 textarea 拆分为两页？
2021-03-25 01:41:55

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

具体在哪里？？
2021-03-15 01:41:55
在那里发布问题，而不是对答案投反对票。我不是该插件的作者来检查或解决问题。
2021-03-18 01:41:55
2021-03-25 01:41:55
当您使用右下角更改宽度时，它不会调整高度。
2021-03-27 01:41:55

无论出于何种原因，Alciende 的回答在 Safari 中对我来说并不完全适用，但在稍作修改后做到了：

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

希望这有助于某人

当然这是一个很好的解决方案......如果你想在每次用户按下一个键时对你的 textarea 进行频闪。:V
2021-03-18 01:41:55
这在当时解决了我的问题。今天，我可能会使用 Ravimalya 的回答中给出的 jackmoore 的 jQuery 解决方案
2021-04-09 01:41:55
其它你可能感兴趣的问题
上一篇将对象字符串转换为 JSON 下一篇Safari 的 html5 localStorage 错误：“QUOTA_EXCEEDED_ERR：DOM 异常 22：尝试向存储添加超出配额的内容。”