如何创建一个真正自动调整大小的文本区域，随内容缩小和增长？

创建自动调整大小的文本区域

在之前的讨论中，介绍了一种创建自动调整大小的文本区域的方法。然而，仍然存在一个限制：文本区域在内容删除时无法缩小。关键问题在于获取文本区域内容的正确高度。

完整解决方案

以下代码提供了一个全面的解决方案，解决了上一种方法遇到的限制：

$("textarea").each(function () {
  this.style.height = this.scrollHeight + "px";
  this.style.overflowY = "hidden";
}).on("input", function () {
  this.style.height = "auto";
  this.style.height = this.scrollHeight + "px";
});

优点：

• 适用于按键输入
• 支持粘贴文本（右键单击和 ctrl v）
• 处理剪切文本（右键单击和 ctrl x）
• 容纳预加载文本
• 适用于所有文本区域（多行文本框）全站
• 兼容 Firefox、Chrome、IE、Edge、iOS Safari 和 Android 浏览器
• 严格 JavaScript 模式兼容

实现：

1. 在主脚本中包含 jQuery 库文件。
2. 将 JavaScript 代码片段复制到主脚本文件中。
3. 自我调整文本区域现在可以在您的网站上使用。

有了这个增强的代码，文本区域现在可以轻松地自动调整大小，从而在各种平台和浏览器上提供用户友好且一致的体验。

以上是如何创建一个真正自动调整大小的文本区域，随内容缩小和增长？的详细内容。更多信息请关注PHP中文网其他相关文章！