前端开发中，textarea 是经常使用的表单元素之一。然而，当用户输入大量文本时，textarea 可能会因为内容溢出而需要调整大小。要实现这样的自动调整，我们就需要对 textarea 进行监听，同时响应其 resize 事件。
监听 resize 事件
首先，我们需要对 textarea 的 resize 事件进行监听。由于 resize 事件只有在用户改变 textarea 的大小时才会被触发，所以我们可以通过以下代码来完成监听：
const textarea = document.querySelector('textarea');
textarea.addEventListener('resize', () => {
// 在此处添加自动调整大小的代码
});自动调整大小
当 textarea 的大小发生变化时，我们需要自动调整其高度以适应其中的内容。实现该功能的关键是计算 textarea 内容的高度。我们可以通过以下代码来计算 textarea 内容的高度：
function getTextareaHeight(textarea) {
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
const lines = textarea.value.split('\n').length;
return lineHeight * lines;
}以上代码中，我们首先获取了 textarea 的 line-height 属性，并且将其转换为整数。接着，我们通过计算 textarea 中换行符的数量来确定其中的文本行数。最后，我们将 line-height 与行数相乘，从而得到 textarea 的预期高度。
计算完 textarea 高度后，我们可以将其应用于 textarea 的样式，从而实现自动调整大小。以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----- --- -----------------
-------
-------- -
------ -----
------- -----
----------- ------
----------- -----------
-------- -----
---------- -----
------------ ----
-
--------
-------
------
--------- ---------------------------
--------
----- -------- - --------------------------------------
-------- --------------------------- -
----- ---------- - ------------------------------------------------
----- ----- - ----------------------------------
------ ---------- - ------
-
---------------------------------- -- -- -
--------------------- - -----------------------------------
---
---------
-------
-------结论
在本文中，我们讨论了如何监听 textarea 的 resize 事件，并且介绍了一个自动调整其大小以适应内容的方法。通过这种方式，我们可以为用户提供更加友好的表单输入体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25981