javascript - 在 2021 年制作类似于 Iphone 上的 imessage 应用程序的输入框或文本区域

Question

关于如何使文本区域或其他文本输入框可扩展的问题，有很多关于 SO 的问题和答案可以追溯到十多年前。所有这些答案似乎都有缺点，而且许多已经过时（使用 Jquery 等）

我正在尝试复制 iphone 上的 iMessage 应用程序，如果您在第一行输入超过字符数限制，则文本输入框会垂直扩展。

一些较旧的方法使用 div 而不是 textarea，例如：

div {
  display: inline-block;
  border: solid 1px #000;
  min-height: 200px;
  width: 300px;
}
<div contentEditable="true"></div>

2021 年是否有使用 CSS 或少量 JS 的现代方式？

感谢您的任何建议。

标签： javascriptcssformstextareaimessage

Answer 1

我更喜欢使用的是，然后通过使用函数CSS grid让你的文本区域自动增长。minmax()

您可以在本文中阅读更多相关信息： https ://css-tricks.com/the-cleanest-trick-for-autogrowth-textareas/