首页 >web前端 >js教程 >如何创建一个真正自动调整大小的文本区域,随内容缩小和增长?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-15 08:05:14581浏览

How Can I Create a Truly Auto-Resizing Textarea That Shrinks and Grows with Content?

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

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

完整解决方案

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

$("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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn