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

Posted 2023-05-07

【中文标题】在 2021 年制作类似于 Iphone 上的 imessage 应用程序的输入框或文本区域

【英文标题】：Make input box or textarea that expands with input similar to imessage app on Iphone in 2021

【发布时间】：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。

【参考方案1】：

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

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