原生JS实现Textarea文本框根据内容自适应改变高度

2023-11-19 01:44:13

## 原生JS实现Textarea文本框根据内容自适应改变高度

在项目开发过程中，我们经常需要使用 <textarea> 文本框来让用户录入意见信息。通常情况下，我们都会使用 el-input 标签，并设置 type="textarea" 属性。但是，当我们指定了 :row="number" 属性后，如果输入文本量或显示文本量超过了指定的行数，就会出现垂直滚动条。

在大多数情况下，这并不是问题。但是，在某些情况下，垂直滚动条可能会被隐藏，比如在 IE 浏览器中。这会导致用户无法滚动文本框的内容，从而影响用户体验。

为了解决这个问题，我们可以使用原生 JavaScript 来实现 textarea 文本框根据内容自适应改变高度的功能。这样，无论用户在文本框中输入了多少内容，文本框的高度都会自动调整，以适应内容的大小。

步骤一：获取文本框元素

首先，我们需要获取文本框元素。我们可以使用 document.querySelector() 方法来做到这一点。

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

步骤二：添加事件监听器

接下来，我们需要为文本框元素添加一个事件监听器，以便在文本框的内容发生变化时触发。我们可以使用 addEventListener() 方法来做到这一点。

textarea.addEventListener('input', () => {
  // 在这里编写当文本框内容发生变化时需要执行的代码
});

步骤三：调整文本框高度

在事件处理函数中，我们需要调整文本框的高度。我们可以使用 scrollHeight 属性来获取文本框的内容高度。然后，我们将这个高度设置为文本框的高度。

textarea.style.height = textarea.scrollHeight + 'px';

步骤四：兼容不同浏览器

为了兼容不同的浏览器，我们需要对代码进行一些修改。在 IE 浏览器中，我们需要使用 offsetHeight 属性来获取文本框的高度。

textarea.style.height = textarea.offsetHeight + 'px';

示例代码

以下是完整的示例代码：

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

textarea.addEventListener('input', () => {
  if (navigator.userAgent.indexOf('MSIE') !== -1) {
    textarea.style.height = textarea.offsetHeight + 'px';
  } else {
    textarea.style.height = textarea.scrollHeight + 'px';
  }
});