使用 Alpine.js 自动增加 textarea 的高度

Alpine.js 是一个用于实现可交互 JavaScript 组件的 JavaScript 框架。在本文中，我们将看到如何使用 Alpine.js 自动增加 textarea 的高度。

HTML

首先，在 HTML 中创建一个 textarea 元素，并添加一个 x-data 属性指向一个对象，该对象包含一个 height 属性，初始化为元素的默认高度：

<textarea x-data="{ height: 'auto' }"></textarea>

JavaScript

然后，我们将在 JavaScript 中创建一个 x-init 属性，该属性将在每次页面加载时调用该函数，并在元素上设置事件监听器：

<textarea 
  x-data="{ height: 'auto' }"
  x-init="() => {
    $el.addEventListener('input', () => {
      $el.style.height = 'auto';
      $el.style.height = $el.scrollHeight + 'px';
    });
  }"
></textarea>

在这个函数中，我们添加了一个事件监听器，该监听器将在用户输入内容时触发，使 textarea 元素的高度根据其内容自动增加。

我们使用 scrollHeight 属性来获取元素的所需高度，然后将其设置为元素的新高度。

完整代码

<textarea 
  x-data="{ height: 'auto' }"
  x-init="() => {
    $el.addEventListener('input', () => {
      $el.style.height = 'auto';
      $el.style.height = $el.scrollHeight + 'px';
    });
  }"
></textarea>

结论

使用 Alpine.js，我们可以很容易地实现 textarea 的自动增加高度功能，而不需要编写大量的 JavaScript 代码。