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

【问题标题】：Make input box or textarea that expands with input similar to imessage app on Iphone in 2021在 2021 年制作类似于 Iphone 上的 imessage 应用程序的输入框或文本区域
【发布时间】：2021-10-09 23:19:55
【问题描述】：

关于如何使文本区域或其他文本输入框可扩展的问题，有许多关于 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？

感谢您的任何建议。

【问题讨论】：

注意：现在contenteditable 比最初提出使用div[min-height][height="auto"] 时更多widely supported。

标签： javascript css forms textarea imessage

【解决方案1】：

我更喜欢使用CSS grid，然后使用minmax()函数让你的textarea自动增长。

您可以在本文中了解更多信息： https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/

【讨论】：