如何实现textarea自适应高度？满满的干货！

2023-08-31 00:18:27

实现textarea自适应高度：CSS、JavaScript和Vue的详解

在网页开发中，使用textarea元素收集用户输入可谓司空见惯。为了优化用户体验，动态调整textarea的高度以适应其内容尤为重要。本文将深入探讨使用CSS、JavaScript和Vue实现textarea自适应高度的方法，助你轻松解决这一常见难题。

原理剖析

textarea自适应高度的关键在于实时监测输入，并相应调整其高度。当用户键入内容时，JavaScript或Vue脚本计算所需的textarea高度，并通过CSS应用该高度。这样，随着内容的增加，textarea的尺寸会自动扩大，消除用户手动调整大小的麻烦。

CSS实现

首先，通过CSS设置textarea的样式，确保其不可手动调整大小，同时限制其最大高度：

textarea {
  resize: none;
  max-height: 500px;
}

JavaScript实现

接下来，使用JavaScript监听textarea的输入事件，并根据其内容计算和设置高度：

// 获取textarea元素
const textarea = document.getElementById('textarea');

// 添加输入监听器
textarea.addEventListener('input', () => {
  // 计算内容高度
  const contentHeight = textarea.scrollHeight;

  // 设置textarea高度
  textarea.style.height = contentHeight + 'px';
});

Vue实现

对于Vue应用，可以使用v-model指令将textarea与一个data属性绑定：

<template>
  <textarea v-model="value"></textarea>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  mounted() {
    // 获取textarea元素
    this.textarea = this.$refs.textarea;

    // 添加输入监听器
    this.textarea.addEventListener('input', this.updateHeight);
  },
  methods: {
    updateHeight() {
      // 计算内容高度
      const contentHeight = this.textarea.scrollHeight;

      // 设置textarea高度
      this.$refs.textarea.style.height = contentHeight + 'px';
    },
  },
};
</script>