在前端开发中，我们经常需要使用到输入文本框。但是有时候我们并不知道用户会输入多少字符，如果固定了文本框的长度，可能会导致用户输入不完整或者文本框显得过大，影响页面的美观性。因此，让输入文本框可以随着输入内容多少自动延伸是一个很实用的功能。
在本文中，我将详细介绍如何实现这个功能，并且提供示例代码，帮助读者更好地理解和学习。
实现方法
实现输入文本框随着输入内容多少自动延伸的功能主要涉及两个方面：监听输入事件和改变文本框的高度。
监听输入事件
我们需要在输入文本框中输入文字时动态地获取文本框的内容以及文本框的高度，从而实现文本框的自适应。为此，我们可以使用 input 事件来监听用户输入，并实时获取当前文本框中的内容和高度。
const inputElement = document.querySelector('#myInput');
inputElement.addEventListener('input', function() {
const textHeight = inputElement.scrollHeight;
const textContent = inputElement.value;
// 在这里进行文本框高度的设置
});改变文本框的高度
监听到用户输入后，我们需要根据当前文本框中的内容动态地改变文本框的高度。为此，我们可以使用 scrollHeight 属性来获取文本框中文字的实际高度，并设置文本框的高度为该值。
inputElement.style.height = `${textHeight}px`;同时，我们还需要考虑到文本框的最大高度和最小高度的限制。一般情况下，我们希望文本框在达到最大高度之后出现滚动条，而不是继续增加高度，影响页面的美观性。
因此，在设置文本框高度时，我们需要判断当前高度是否超过了最大高度，如果超过了就将文本框的高度设置为最大高度，并且设置 overflow-y: scroll 属性，让文本框出现纵向滚动条。
-- -------------------- ---- ------- ----- ---------- - ---- -- ---- -- ----------- - ----------- - ------------------------- - ------------------ ---------------------------- - --------- - ---- - ------------------------- - ------------------ ---------------------------- - --------- -
示例代码
下面是一个完整的示例代码，可以复制到自己的项目中进行测试：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------------
-------
-------- -
------ -----
---------- -----
------------ ----
-------- -----
------- --- ----- -----
-------------- ----
----------- -----------
------- -----
-
-------------- -
-------- -----
------------- --------
----------- - - - --- ------- ---- ---- -----
-
--------
-------
------
-----
--------- ------------ --------------------------------
------
--------
----- ------------ - -----------------------------------
----- ---------- - ---- -- ----
-------------------------------------- ---------- -
----- ---------- - --------------------------
----- ----------- - -------------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------