uni-app 内置组件 textarea 失焦问题

uni-app 内置组件 textarea 失焦问题

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 22H2
HBuilderX类型 正式
HBuilderX版本号 4.83
手机系统 Android
手机系统版本号 Android 16
手机厂商 ios
手机机型 16pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

    <textarea  
      v-model="inputMessage"  
      :placeholder="inputPlaceholder"  
      :auto-height="true"  
      :maxlength="-1"  
      @focus="onInputFocus"  
      @blur="onInputBlur"  
      @input="onInputChange"  
      @confirm="sendMessage"  
    ></textarea>
```

# 操作步骤：
1. textarea聚焦输入
2. 右侧清空
3. 删除几个文字
4. 完成关闭在弹出来键盘
5. 在进行输入和删除
6. 输入框突然失焦
7. 输入的文字不会和输入框进行联动了

# 预期结果：
textarea 无论我删除清空多少次 再次打开键盘的时候可以输入的内容可以正常回显到输入框中去

# 实际结果：
多次打开关闭 键盘 输入清空 后面我再次输入的时候 文本丢失了，不会在回显到 textarea 输入框中

# bug描述：
1. textarea聚焦输入
2. 右侧清空
3. 删除几个文字
4. 完成关闭在弹出来键盘
5. 在进行输入和删除
6. 输入框突然失焦
7. 输入的文字不会和输入框进行联动了

## 附件
- [textarea复现视频.zip](https://ask.dcloud.net.cn/file/download/file_name-dGV4dGFyZWHlpI3njrDop4bpopEuemlw__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyNTEwMjAvMWNiOTA5NTNmMTkyZmJhZTEzMDk5NmNmZDJlMjZkZDk=)

更多关于uni-app 内置组件 textarea 失焦问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

先把你这个textarea上绑定的事件全部去掉看看有没有问题

更多关于uni-app 内置组件 textarea 失焦问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


提供下完整的可以运行的示例看看

这个不用提供示例你自己 写一个 textarea 去一直输入 输入的快一些就会复现

复现步骤 1、需要一个ios 手机运行到自定义基座 2、需要使用ios 默认输入法 一直去输入东西 输入需要快一些 3、在输入的过程中一直触发输入就会失焦

这是一个已知的 uni-app textarea 组件在 Android 平台上的兼容性问题。问题主要出现在键盘频繁打开关闭和内容清空操作时，组件内部状态与数据绑定出现不同步。

问题分析：

  1. textarea 组件在 Android 上存在键盘管理相关的 bug
  2. 多次 focus/blur 操作后，v-model 双向绑定可能失效
  3. 组件内部状态与 Vue 数据响应式系统出现脱节

解决方案：

  1. 强制刷新组件
onInputBlur() {
  this.$forceUpdate();
}
  1. 使用 ref 手动设置值
<textarea ref="textareaRef" ...></textarea>

onInputBlur() {
  this.$nextTick(() => {
    this.$refs.textareaRef.value = this.inputMessage;
  });
}
  1. 添加键盘控制延迟
onInputFocus() {
  setTimeout(() => {
    // 确保焦点稳定
  }, 50);
}
  1. 考虑使用原生输入框 如果问题持续存在，建议在 manifest.json 中配置使用原生输入框：
"app-plus": {
  "softinputMode": "adjustResize"
}
回到顶部