Javascript 要根据内容长度调整大小的Textarea

我需要一个文本区，我在框中键入我的文本，它的长度会根据需要增长，以避免处理滚动条，它需要在删除文本后收缩！

---

我不想走mootools或jquery路线，因为我有一个轻量级表单。

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

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自动调整大小的问题。

您可以通过使用跨度和textarea来实现这一点

每次更改文本时，必须使用文本区域中的文本更新跨度。然后将textarea的css宽度和高度设置为span的clientWidth和clientHeight属性

例如：

---

您可以通过设置为

1px

然后读取

scrollHeight

属性来检查内容的高度：

功能文本区域调整（元素）{
element.style.height=“1px”；
element.style.height=（25+element.scrollHeight）+“px”；
}

---

您也可以尝试将

contenteditable

属性添加到普通

p

或

div

上。不是真正的

textarea

，但它会自动调整大小而不需要脚本

.divtext{
边界：脊2倍；
填充物：5px；
宽度：20em；
最小高度：5em；
溢出：自动；
}

Hello World

使用此功能：

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

使用以下html：

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

---

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

Alciende的回答刚才在Safari中由于任何原因都不太适合我，但经过一次小的修改后：

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

---

---

希望这对某人有所帮助

一个jquery解决方案已经实现，源代码可以在github中找到：。

只有当字体是等距字体时，它才能正常工作。此外，textarea没有“value”属性。如果字体大小不是16pxPawka，这也会发生故障-textarea确实有“value”DOM属性。当用户在textarea上键入“enter”时，这将不起作用。代码未经测试，当然可以改进。是的，textarea的值是和中的内容。Firefox中存在一个问题，如果用户输入一个很长的单词（没有空格，比textarea大），那么“溢出：隐藏”将阻止她看到单词的右端。其他浏览器则不在乎，因为它们将在没有空格的情况下实现盈亏平衡。您可以使用“overflow-y:hidden”来解决这个问题，但是您的css不符合标准。关于Firefox问题，它可能很快就会得到解决：如果您的textarea太高，并在页面上生成滚动，并且您的页面恰好向下滚动，当您的“height=1px”时，这会将滚动位置重置为顶部。为了避免这种情况，您可以临时将高度指定给textarea的父级。这是一个非常类似的答案：如果我们在将其设置为

scrollHeight

之前设置了

height='auto'

，那么它将按预期工作，并根据需要进行收缩。当textarea变得比视图端口高时，就会出现问题。在这种情况下，当textarea增长时，它会变得紧张不安。jQuery也是轻量级的。不要重新创造这个世界。。。至少，检查jQuery的解决方案并尝试复制它。在X或Y中增长？（这两种方法都没有多大意义）完全受限？顺便说一句，因此应该使用以下方法之一进行注释：-）如果您使用react:textarea{display:table；}，我为此创建了一个包。但是，这将在粘贴时添加所有HTML垃圾。请参阅此答案以去除HTML垃圾：如果textarea是只读的，此解决方案非常好。（这种情况可以省略）我还要添加

空白：pre设置。很好的解决方案！有一个改进使它更像一个文本区域：我将在div框
上添加一个光标。divtext:hover{cursor:text；}
。在我的例子中，我还修改了
.divtext:focus
类，以便在聚焦文本框时更改背景颜色。在'19年，angular 7和ngx highlight仍然可以使用

CSS表达式已被弃用。我知道这是一篇旧文章，但当我打印textarea时，如果整个内容不适合第一页，则整个内容将转到第二页，并在第一页上创建不需要的空间。如何在打印时将文本区域分成两页？当然这是一个很好的解决方案。。。如果您想在用户每次按键时选通文本区域：这解决了我当时的问题。今天，我可能会使用Ravimallya的回答中给出的jackmoore的jQuery解决方案Where确切地说是？？？@KimHomann。当您使用右下角更改宽度时，它不会调整高度。在那里发布问题，而不是对答案进行向下投票。我不是该插件的作者来检查或修复这个问题。

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

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