使用 JavaScript 实现自动调整文本框大小

在 Web 开发中,我们经常需要实现可以自动增长大小的文本框,以适应用户输入的内容。今天我将介绍一个使用 JavaScript 实现文本框自动调整大小的简单方法。

自动调整大小的文本框对用户来说是更友好的交互方式。当用户输入内容时,文本框的大小会自动增长以容纳内容,无需用户手动调整。这提供了更流畅的用户体验。

实现这个功能的关键是监听文本框的input事件,在事件处理函数中动态设置文本框的高度。具体代码如下:

<textarea id="myTextarea" oninput="autoResize()"></textarea> 

<script>
function autoResize() {
  const textarea = document.getElementById('myTextarea');

  textarea.style.height = 'auto';

  textarea.style.height = textarea.scrollHeight + 'px';
}  
</script>

我们使用纯 JavaScript 代码实现,无需借助其他库。主要步骤是:

在文本框上绑定 input 事件的处理函数 autoResize()。
在 autoResize() 中,先将高度设置为 auto,使文本框自动调整到内容大小。
然后获取文本框的 scrollHeight,并explicitly 设置高度为 scrollHeight。

这样就可以实时监听内容变化并自动调整文本框大小。

这种自动增长文本框的方法非常实用,可以提高用户体验。当你需要一个文本输入框可以动态扩展时,不妨使用 JavaScript 这样实现。

如果希望文本框在内容减少时也自动缩小,还需要监听 textarea 的 change 事件,在事件处理函数中同样自动设置高度。