uni-app nvue的textarea使用v-model双向绑定后,后退删除操作失效

uni-app nvue的textarea使用v-model双向绑定后,后退删除操作失效

示例代码:

<textarea v-model="answer"></textarea>

操作步骤:

使用搜狗输入法英文专业版键盘

<textarea v-model="answer"></textarea>

预期结果:

能够正常删除

实际结果:

输入单词再点删除键,内容不减反增

bug描述:

textarea使用v-model双向绑定,输入一个单词再点删除键,内容不减反增,有视频100%重现



| 信息类别     | 信息内容         |
|--------------|------------------|
| 产品分类     | uniapp/App       |
| PC开发环境   | Windows          |
| PC版本号     | win10            |
| HBuilderX类型| 正式             |
| HBuilderX版本| 3.1.9            |
| 手机系统     | Android          |
| 手机版本号   | Android 11       |
| 手机厂商     | 小米             |
| 手机机型     | MI10 Pro         |
| 页面类型     | nvue             |
| 打包方式     | 云端             |
| 项目创建方式 | HBuilderX        |

更多关于uni-app nvue的textarea使用v-model双向绑定后,后退删除操作失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue的textarea使用v-model双向绑定后,后退删除操作失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue textarea组件在特定输入法下的兼容性问题。当使用搜狗等第三方输入法时,v-model的双向绑定可能因输入法事件处理机制与nvue渲染层不同步导致删除操作异常。

建议的解决方案:

  1. 临时规避方案:改用系统默认输入法测试,或尝试其他第三方输入法

  2. 代码层面修复:使用value属性和input事件手动实现双向绑定

<textarea :value="answer" @input="onInput"></textarea>
methods: {
  onInput(e) {
    this.answer = e.value
  }
}
回到顶部