从元素输入-Javascript填充时自动调整textarea的大小

我正在尝试创建一个自动调整大小的函数，它根据文本上下文调整textarea高度的大小。但是，内容来自表单的输入元素，因此用户将在表单中输入内容。例如：

<input placeholder="name" value=""/>
<input placeholder="address" value=""/>
<input placeholder="company" value=""/>
<input placeholder="telephone" value=""/>
<textarea value={this.getFinalSentence()}></textarea>

因此，在这种情况下，用户将在输入元素上输入其信息。比如说，textarea

min height:40px

，如果信息数据更长，则将增加

textarea

高度

---

有人遇到过这个问题吗？到目前为止，如果用户编辑textarea，我可以调整textarea的大小，但不能通过输入。非常感谢您的帮助。

我建议将输入值放入状态。然后根据内容长度计算textarea

rows

属性

---

const rows=Math.ceil（this.getFinalContent（）.length/TEXTAREA\u LINE\u length）

触发滚动功能时，您可以侦听滚动并添加另一行

<textarea id ="ta" cols="8" rows="5">afefeefaefae</textarea>
<script>
  document.getElementById("ta").addEventListener("scroll",function() {
    this.rows++;
  });
</script>

afefeefae
document.getElementById（“ta”）.addEventListener（“滚动”，函数（）{
这个.rows++；
});

您需要收听内容更改，并将textarea height更新为scrollHeight

关于以下内容的工作代码段：

一些文本
document.getElementById（“内容”）.addEventListener（“键控”，函数（）{
设scrollHeight=this.scrollHeight；
让高度=这个。clientHeight；
如果（滚动高度>高度）{
this.style.height=滚动高度+'px'；
}
});

类似的解决方案还有：

我创建了一个小的（7kb）自定义元素来处理这些东西。除了监听

input

事件外，它还有一个计时器，每100毫秒触发一次，以确保在文本内容通过其他方式发生变化时仍能正常工作

下面是一个关于codesandbox的快速实现示例：

看起来您使用的是React，所以我在React中编写了这个示例，但是这个组件可以与普通JS、普通HTML或任何其他虚拟DOM一起使用（因为它是作为自定义元素实现的，而不是React组件、jQuery插件或您拥有的任何东西）

基本上，它只需在React中添加以下包装器即可工作：

import "autoheight-textarea";

const App = () => {
  return (
    <autoheight-textarea>
      <textarea rows={2} />
    </autoheight-textarea>
  );
}

导入“自动高度文本区域”；
常量应用=（）=>{
返回(
使用内容可编辑的
p
或
div
代替
textarea
。p和div可根据需要调整大小。将更改/keyup/focus侦听器添加到p/div中，并将文本复制到
的值中。如果不确定这是否有效，则仅当用户在textarea上滚动时，它才有效，它不会自动调整textarea的大小。我试过了，除非我做错了。你能提供js fiddle或其他什么吗？@medev21我在Firefox和IE上测试过。当我只是在文本区域中输入时，我看到它添加了更多的行。我在问题中没有解释清楚，我需要的是当我编辑
输入
元素时，它的数据很大，然后
文本区域
应该根据输入元素数据调整大小；
。请参见上面的代码示例什么是
TEXTAREA\u LINE\u LENGTH
？TEXTAREA的宽度或高度
TEXTAREA
？TEXTAREA单行中的符号数量。如果我编辑TEXTAREA，这会起作用。我需要的是，如果用户编辑输入元素且其数据较大，则xtarea应该自动重新设置OK，如果我理解正确，用户填写输入，然后您组合文本并将其输入textarea？这应该很简单-调用GetFinalContent（）函数后，还可以调用let textarea=document.getElementById（“content”）；textarea.style.height=（textarea.scrollHeight）+'px'；是的，你明白我的意思了。不确定我是否遵循了你的解决方案，你能用js fiddle提供它吗？它对我不起作用。我还在fiddle中添加了一些额外的解释。如果你使用
onkeydown
事件，而不是
onkeydup
，那会更好。按住一个键可以使滚动条在l你释放钥匙。还有其他的事件你也应该试着去听。
import "autoheight-textarea";

const App = () => {
  return (
    <autoheight-textarea>
      <textarea rows={2} />
    </autoheight-textarea>
  );
}

<autoheight-textarea>
  <textarea rows="2" />
</autoheight-textarea>