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