uniapp textarea如何实现高度自适应

在uniapp中，如何让textarea组件根据输入的文本内容自动调整高度？目前textarea设置了固定高度，当内容超出时会出现滚动条，但希望实现类似微信聊天输入框那样，随着换行或内容增加自动增高，减少时自动收缩的效果。尝试过动态绑定style或class修改height属性，但效果不理想。请问是否有官方推荐方案或可靠的实现思路？需要兼容H5和小程序平台。

2 回复

在uniapp中，使用textarea组件时，设置auto-height属性即可实现高度自适应。例如：<textarea auto-height placeholder="请输入内容"></textarea>。当内容增多时，textarea会自动调整高度。


在uni-app中，实现textarea高度自适应可以通过动态绑定textarea的style或class，结合内容变化时计算高度来实现。以下是具体方法：

核心思路

监听textarea的输入内容，根据内容行数或高度动态调整组件高度。

实现步骤

  1. 使用@input事件监听输入变化。
  2. 在事件处理函数中计算内容高度。
  3. 动态设置textarea的样式高度。

示例代码

<template>
  <view>
    <textarea 
      :style="{ height: textareaHeight + 'px' }" 
      @input="onInput" 
      v-model="content" 
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      textareaHeight: 40 // 初始高度
    }
  },
  methods: {
    onInput(event) {
      // 获取textarea元素（在uni-app中需通过$refs或节点查询）
      const query = uni.createSelectorQuery().in(this);
      query.select('textarea').boundingClientRect(data => {
        // 计算新高度：可根据行数或内容调整
        // 简单示例：每行约20px，最小高度40px
        const lines = this.content.split('\n').length;
        this.textareaHeight = Math.max(40, lines * 20);
      }).exec();
    }
  }
}
</script>

注意事项

  • 平台差异：H5端可直接操作DOM，但小程序端需使用uni.createSelectorQuery。
  • 性能优化：频繁计算可能影响性能，可考虑防抖处理。
  • 最小高度：建议设置最小高度避免内容过少时显示异常。

替代方案

使用第三方组件（如uView UI）的自适应textarea，可简化实现。

以上方法适用于大多数场景，根据实际需求调整计算逻辑即可。

回到顶部