在前端开发中，我们经常需要创建一个可以自动调整大小的文本框。例如，在编写评论框或搜索框时，如果用户输入了大量内容，我们希望该文本框能够随着内容的增加而自动调整大小，以便更好地显示其所有内容。
第一步：使用 CSS 实现自动调整大小的文本框
实现这个功能的第一步是使用 CSS。我们可以使用以下样式来创建一个自动调整大小的文本框：
-------- - ------- ----- --------- ------- -
上面的代码会禁止文本框的大小调整，并将溢出的内容隐藏起来。接下来，我们需要使用 JavaScript 来捕获文本框的输入事件，并根据新的内容来调整文本框的大小。
第二步：使用 JavaScript 实现自动调整大小的文本框
要实现自动调整大小的文本框，我们需要为文本框添加输入事件监听器。每当用户输入新的内容时，我们就会更新文本框的高度以适应新内容的长度。
----- -------- - ----------------------------------- ---------------------------------- -- -- - --------------------- - ------- --------------------- - --------------------- - ----- ---
上面的代码首先获取文本框元素，并为其添加一个输入事件监听器。每当用户输入内容时，我们将文本框的高度设置为“auto”，以便可以重新计算文本框的实际高度。然后，我们将文本框的高度设置为其滚动高度（即内容的总高度），这样就可以保证文本框始终适合输入的内容。
示例代码：
--------- -----
------
------
-------
-------- -
------- -----
--------- -------
-
--------
-------
------
---------------------
--------
----- -------- - -----------------------------------
---------------------------------- -- -- -
--------------------- - -------
--------------------- - --------------------- - -----
---
---------
-------
-------结论
在本文中，我们学习了如何使用 CSS 和 JavaScript 创建一个自动调整大小的文本框。此功能对于提高用户体验非常有用，并且可以应用于许多不同的情况中。通过将上述示例代码添加到您的项目中，您可以轻松地为您的用户提供更好的输入体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8720