uni-app input 输入框ios清除值会偶发性失败

uni-app input 输入框ios清除值会偶发性失败

产品分类：

uniapp/App

PC开发环境

操作系统 版本号
Windows win10

手机系统

系统 版本号 厂商 机型
iOS iOS 14 苹果 xr

页面类型

vue

vue版本

vue2

打包方式

云端

项目创建方式

HBuilderX

示例代码：

<template>
<view>
<input v-model="inpText" type="text" />
<button @click="ceshi"></button>
</view>
</template>
<script>
export default {
data(){
inpText : ""
}
},
methods:{
ceshi(){
this.inpText = "";
}
}
</script>

操作步骤：

<template>
<view>
<input v-model="inpText" type="text" />
<button @click="ceshi"></button>
</view>
</template>
<script>
export default {
data(){
inpText : ""
}
},
methods:{
ceshi(){
this.inpText = "";       
}
}
</script>

预期结果：

inpText的值确实是为空，但是输入框的值应该也要清空

实际结果：

输入框的值没清空，但是inpText确实等于""

bug描述：

input 输入框ios，清除值置空，v-model绑定的值是清空了，但是输入框的值还是存在，导致下次发送input内容就会判断失败；


更多关于uni-app input 输入框ios清除值会偶发性失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

“清除”是怎样触发的？有没有具体的规律？

更多关于uni-app input 输入框ios清除值会偶发性失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的情况是，在ios 中文全键盘下，点击键盘完成 @confirm事件触发时，$nextTick回调中对v-model绑定的值进行清空，有概率清空失败，输入框内还是没变，尤其是在按下完成键时，立马接着输入

ios 软键盘点击发送的时候，发送完立马从新输入发送，输入快的话，就会有概率this.inpText 清空了，但是输入框的值还在， 现在我加了一个延时 100ms 清空 inpText 能保证正常

这是一个已知的iOS平台上的渲染同步问题。当通过v-model绑定的数据被清空时，iOS端输入框的DOM更新可能没有及时同步。

解决方案：

  1. 使用$nextTick延迟清空操作：
ceshi(){
  this.inpText = "";
  this.$nextTick(() => {
    this.inpText = "";
  });
}
  1. 使用原生DOM操作强制更新（推荐）：
ceshi(){
  this.inpText = "";
  // 强制触发input事件
  const input = document.querySelector('input');
  if(input) {
    input.value = "";
    input.dispatchEvent(new Event('input', { bubbles: true }));
  }
}
  1. 使用uni-app的API操作：
ceshi(){
  this.inpText = "";
  // 使用setTimeout确保在下一个事件循环中执行
  setTimeout(() => {
    this.inpText = "";
  }, 0);
}
  1. 添加@input事件手动同步：
<input v-model="inpText" type="text" @input="handleInput" />

methods: {
  ceshi(){
    this.inpText = "";
  },
  handleInput(e){
    this.inpText = e.detail.value;
  }
}
回到顶部