【问题标题】：How to make a input field expand vertically and not horizontally when you type? [duplicate]键入时如何使输入字段垂直而不是水平扩展？ [复制]
【发布时间】：2021-08-29 18:22:31
【问题描述】：

问题

我做了一个输入。现在，当我输入时，输入将调整它的大小，使其适合其中的文本数量。现在的问题是我试图在互联网上寻找一些答案，但是所有的都是水平扩展，但我希望当它到达某个点时，它会垂直扩展而不是水平扩展。我也不想要创建一个可以内容编辑的 span 或 div。我该怎么做？

一些代码

<html>
  <body>
    <input>
  </body>
</html>

【问题讨论】：

你看过<textarea />元素吗？
嗯，是的，但我们的目标是使其成为输入标签，而不是其他任何东西。
@DrakeKrewson 为什么它必须是输入标签？
<input type="text" 只允许 1 行。您需要使用@MK 提到的文本区域
好的，我会尝试使用 textarea 标签来连接它。如果这不起作用，我会通知你。

标签： javascript html css

【解决方案1】：

输入仅用于单行输入。甚至无法在输入中添加新行。

您正在寻找的是适合内容高度的文本区域。这可以通过 JavaScript 实现：

document.querySelector('textarea').addEventListener("input", function(){
  this.style.height = '0px';
  this.style.height = this.scrollHeight + 'px';
})

&lt;textarea&gt;&lt;/textarea&gt;

【讨论】：

嗯，我不希望它是可扩展的。
@Drake “我希望它到达某个点时，它会垂直扩展”
我认为@DrakeKrewson 的意思是他不希望用户调整它的大小
在 CSS 中添加 textarea { resize: vertical; } 或 textarea { resize: none; } 应该可以修复它
好的，我明白了。我会试试的。