从元素输入填写时自动调整文本区域的大小 - Javascript答案

【问题标题】：autoresize textarea when filling out from the element inputs - Javascript从元素输入填写时自动调整文本区域的大小 - Javascript
【发布时间】：2019-11-12 19:09:01
【问题描述】：

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

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

所以在这种情况下，用户将在输入元素上输入其信息。比如说textareamin-height: 40px，如果信息数据长那么textarea高度就会增加。

有人遇到过这个问题吗？到目前为止，如果用户编辑 textarea，我能够调整 textarea 的大小，但不能从输入中调整。您的帮助将不胜感激。

【问题讨论】：

使用带有 contenteditable 的 p 或 div，而不是 textarea。 P 和 div 可以根据需要调整大小。将 change/keyup/focus 侦听器添加到您的 p/div 并将文本复制到 <input type='hidden'> 的值中

标签： javascript html css reactjs

【解决方案1】：

你需要监听内容变化，并将textarea高度更新为scrollHeight。

工作 sn-p： https://jsfiddle.net/0zsd3nty/

<textarea id ="content">some text</textarea>

document.getElementById("content").addEventListener("keyup", function() {
  let scrollHeight = this.scrollHeight;
  let height = this.clientHeight;

  if (scrollHeight > height) {
    this.style.height = scrollHeight + 'px';
  }
});

类似的解决方案也在：jQuery / JS get the scrollbar height of an textarea

【讨论】：

如果我编辑文本区域，这将有效。我需要的是，如果用户编辑输入元素并且它的数据很大，那么 textarea 应该自动调整大小
好吧，如果我理解正确，用户填写输入，那么你合并文本并输入到textarea？这应该很简单——在调用 getFinalSentence() 函数之后，还要调用 let textarea = document.getElementById("content"); textarea.style.height = (textarea.scrollHeight) + 'px';
是的，你明白我的意思。不确定我是否遵循您的解决方案，您可以在 js fiddle 中提供它吗？它不适合我
给你：jsfiddle.net/ej41k9zn - 我还在小提琴中添加了一些额外的解释。
最好使用onkeydown 事件，而不是onkeyup。按住一个键会使滚动条可见，直到您释放该键。您还应该尝试收听其他事件。

【解决方案2】：

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

const rows = Math.ceil(this.getFinalSentence().length/TEXTAREA_LINE_LENGTH)

【讨论】：

什么是TEXTAREA_LINE_LENGTH？ textarea 的宽度或高度？
textarea单行的符号数量。

【解决方案3】：

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

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

【讨论】：

不确定这是否有效，只有当用户在 textarea 上滚动时才会有效，它不会自动调整 textarea 的大小。
我确实试过了，除非我做错了。能提供js fiddle什么的吗？
@medev21 我在 Firefox 和 IE 上测试了这个。当我继续在文本区域中输入时，我看到它添加了更多行
也许我在问题中没有很好地解释，我需要的是当我编辑input元素时，它的数据很大，那么textarea应该根据输入元素调整大小数据; <input>。见上面的代码示例

【解决方案4】：

我创建了一个小的 (7kb) 自定义元素来处理这些内容。除了侦听input 事件，它还有一个每100 毫秒触发一次的计时器，以确保在文本内容因其他方式发生变化时一切正常。

这里有一个关于代码沙盒的快速实现示例：https://codesandbox.io/s/loving-banach-u00ip

看起来你正在使用 React，所以我在 React 中编写了示例，但是这个组件适用于纯 JS、纯 HTML 或任何其他虚拟 DOM（因为它是作为自定义元素实现的，而不是作为 React 组件， jQuery插件或者你有什么）

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

import "autoheight-textarea";

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

或者，如果您使用纯 HTML，只需将脚本导入某处并执行

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

您可以从 NPM 中获取自定义元素：https://www.npmjs.com/package/autoheight-textarea

【讨论】：