uniapp textarea组件的使用方法

在uniapp中使用textarea组件时，如何设置默认值并实现双向绑定？如何限制输入字数并显示剩余字数？textarea的placeholder样式能否自定义？在iOS和安卓平台上，textarea的软键盘弹出行为不一致，该如何处理？如何通过CSS调整textarea的高度自适应内容？

2 回复

在uniapp中，使用textarea组件可创建多行文本输入框。基本用法如下：

  1. 在template中添加：
<textarea v-model="content" placeholder="请输入内容"></textarea>
  1. 在script中定义数据：
data() {
  return {
    content: ''
  }
}

常用属性：

  • placeholder：提示文本
  • maxlength：最大输入长度
  • auto-height：高度自适应
  • disabled：禁用状态

支持@input、@focus等事件监听。


UniApp 中 textarea 组件用于多行文本输入，支持自动增高、占位符、字数统计等功能。以下是基本使用方法和关键属性：

基本用法

<template>
  <view>
    <textarea 
      v-model="textValue" 
      placeholder="请输入内容"
      maxlength="100"
      auto-height
    />
    <text>已输入：{{ textValue.length }}/100</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textValue: ''
    }
  }
}
</script>

核心属性说明

  1. v-model：绑定输入值（支持双向绑定）
  2. placeholder：输入框为空时显示的提示文本
  3. maxlength：最大输入字符数（中文/英文均算1个字符）
  4. auto-height：是否自动增高（根据内容调整高度）
  5. disabled：是否禁用（默认false）
  6. focus：自动获取焦点（需配合条件触发）
  7. show-confirm-bar：是否显示键盘完成栏（iOS有效）

常用事件

<textarea 
  @focus="onFocus"
  @blur="onBlur"
  @input="onInput"
  @confirm="onConfirm"
/>
  • @focus：获得焦点时触发
  • @blur：失去焦点时触发
  • @input：输入时实时触发
  • @confirm：点击完成按钮时触发（仅部分键盘支持）

注意事项

  1. 在 iOS 端使用 auto-height 时，建议设置 min-height 避免初始高度异常
  2. 微信小程序中 textarea 为原生组件，层级最高（可能覆盖其他元素）
  3. 如需固定高度，直接使用 height 属性（单位px/rpx）

扩展功能示例

<textarea 
  v-model="content"
  placeholder带固定高度的输入框"
  :maxlength="200"
  :show-confirm-bar="false"
  :disabled="isDisabled"
  @blur="saveContent"
  style="height: 120rpx;"
/>

通过合理组合属性和事件，即可实现符合业务需求的文本输入功能。

回到顶部