DEV Community
·
仅使用JavaScript创建自动扩展的文本区域
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文介绍了如何创建一个自动扩展的文本区域组件，满足无额外JavaScript库和可访问性要求。通过计算输入内容的行数和高度，动态调整文本区域的高度，关键在于使用scrollHeight获取内容高度，并在每次输入时重置高度为auto，以确保正确调整，最终实现了完美的自动调整文本区域。
🎯
关键要点
- 本文介绍了如何创建一个自动扩展的文本区域组件，满足无额外JavaScript库和可访问性要求。
- 文本区域的高度根据用户输入的内容动态调整，关键在于使用scrollHeight获取内容高度。
- 需要计算文本区域的最终高度，包括行高、上下内边距和边框宽度。
- 设置文本区域的rows属性为1，以重置默认行数。
- 通过JavaScript监听输入事件，检测用户在文本区域的输入。
- 文本区域的resize属性设置为none，以防止用户手动调整大小。
- 使用Element.scrollHeight来计算内容的实际高度，并根据行高计算行数。
- 在每次输入时，将文本区域的高度重置为auto，以确保正确调整高度。
- 最终实现了一个完美的自动调整文本区域。
🏷️
标签
➡️
