创建一个自动调整大小的文本框-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要创建一个可以自动调整大小的文本框。例如，在编写评论框或搜索框时，如果用户输入了大量内容，我们希望该文本框能够随着内容的增加而自动调整大小，以便更好地显示其所有内容。

第一步：使用 CSS 实现自动调整大小的文本框

实现这个功能的第一步是使用 CSS。我们可以使用以下样式来创建一个自动调整大小的文本框：

textarea {
  resize: none;
  overflow: hidden;
}

上面的代码会禁止文本框的大小调整，并将溢出的内容隐藏起来。接下来，我们需要使用 JavaScript 来捕获文本框的输入事件，并根据新的内容来调整文本框的大小。

第二步：使用 JavaScript 实现自动调整大小的文本框

要实现自动调整大小的文本框，我们需要为文本框添加输入事件监听器。每当用户输入新的内容时，我们就会更新文本框的高度以适应新内容的长度。

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
});

上面的代码首先获取文本框元素，并为其添加一个输入事件监听器。每当用户输入内容时，我们将文本框的高度设置为“auto”，以便可以重新计算文本框的实际高度。然后，我们将文本框的高度设置为其滚动高度（即内容的总高度），这样就可以保证文本框始终适合输入的内容。

示例代码：

-- -------------------- ---- -------
--------- -----
------
  ------
    -------
      -------- -
        ------- -----
        --------- -------
      -
    --------
  -------
  ------
    ---------------------

    --------
      ----- -------- - -----------------------------------

      ---------------------------------- -- -- -
        --------------------- - -------
        --------------------- - --------------------- - -----
      ---
    ---------
  -------
-------

结论

在本文中，我们学习了如何使用 CSS 和 JavaScript 创建一个自动调整大小的文本框。此功能对于提高用户体验非常有用，并且可以应用于许多不同的情况中。通过将上述示例代码添加到您的项目中，您可以轻松地为您的用户提供更好的输入体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/8720