uni-app textarea 使用v-model时 中文输入法输入只会出现英文字母

uni-app textarea 使用v-model时 中文输入法输入只会出现英文字母

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10-1909
HBuilderX 正式
HBuilderX版本 3.1.8
手机系统 Android
手机版本号 Android 10
手机厂商 魅族
手机机型 16spro
页面类型 nvue
打包方式 离线
项目创建方式 HBuilderX

示例代码：

<view>
<textarea v-model="text" placeholder="说一句话吧~" />
</view>

bug描述：

textarea 使用v-model时，中文输入法输入只会出现英文字母


更多关于uni-app textarea 使用v-model时 中文输入法输入只会出现英文字母的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app textarea 使用v-model时 中文输入法输入只会出现英文字母的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue页面在Android平台上的兼容性问题。当在Android设备上使用nvue页面的textarea组件配合v-model双向绑定时，中文输入法会出现输入异常，只能输入英文字母。

问题原因： 这是由于nvue在Android平台上的原生渲染机制与中文输入法的兼容性问题导致的。v-model的实时数据更新会干扰输入法的正常候选词选择流程。

解决方案：

  1. 使用@input事件替代v-model
<textarea 
  :value="text" 
  [@input](/user/input)="onTextInput"
  placeholder="说一句话吧~" 
/>

export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onTextInput(event) {
      this.text = event.detail.value
    }
  }
}
  1. 对于需要实时响应的场景，可以添加防抖处理
methods: {
  onTextInput: uni.$u.debounce(function(event) {
    this.text = event.detail.value
  }, 300)
}
回到顶部