uniapp textarea如何设置自动增加高度并限制最大高度?

在uniapp中，如何实现textarea组件的高度随着输入内容自动增加，同时限制最大高度？我希望当内容超过一行时，textarea能自动扩展高度，但达到指定最大高度后就不再增加，并出现滚动条。目前尝试了设置auto-height属性，但不知道如何限制最大高度，求具体实现方法或示例代码。

2 回复

使用textarea的auto-height属性，并设置maxlength和样式限制最大高度。

示例：

<textarea 
  auto-height 
  maxlength="200"
  style="max-height: 200px;"
></textarea>

auto-height让高度自适应内容，max-height样式限制最大高度。


在 UniApp 中，可以通过以下方法设置 textarea 自动增加高度并限制最大高度：

  1. 使用 auto-height 属性：启用自动高度。
  2. 通过 CSS 设置 max-height：限制最大高度。
  3. 结合 [@linechange](/user/linechange) 事件（可选）：动态调整高度。

示例代码

<template>
  <view>
    <textarea 
      v-model="text" 
      auto-height 
      :style="textareaStyle" 
      [@linechange](/user/linechange)="handleLineChange"
      placeholder="输入内容..."
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      maxHeight: '200px' // 设置最大高度
    };
  },
  computed: {
    textareaStyle() {
      return `max-height: ${this.maxHeight}; overflow-y: auto;`;
    }
  },
  methods: {
    handleLineChange(event) {
      // 可选：根据行数动态处理
      console.log('当前行数:', event.detail.lineCount);
    }
  }
};
</script>

说明

  • auto-height：使 textarea 根据内容自动调整高度。
  • max-height：通过 CSS 限制最大高度，超出时显示滚动条。
  • @linechange：监听行数变化事件，可用于更复杂的逻辑。

注意事项

  • 确保 textarea 的父容器没有固定高度限制。
  • 测试不同平台的兼容性（如微信小程序、H5）。

这样即可实现自动增高并限制最大高度的效果。

回到顶部