uni-app 小程序 input v-model 双向绑定输入内容时内容闪烁自动删除字符问题

uni-app 小程序 input v-model 双向绑定输入内容时内容闪烁自动删除字符问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<view class="info-wapper" style="margin-top: 40upx;" >  
    <label class="words-lbl">身份证号</label>  
    <input name="aae135" id="aae135" type="text"  v-model="aae135"   maxlength="18"   class="input" placeholder="请输入身份证号" placeholder-class="graywords" />  
</view>

操作步骤：

  • 输入长串文字或数字

预期结果：

  • 依次流程显示输入文字或数字

实际结果：

  • 卡顿、闪烁、自动删除已输入的文字

bug描述：

今天用uni-app开发的时候遇到input输入内容的时候内容闪烁的问题,有时候自动删除已经输入的一个字符，十分卡

bug重现


更多关于uni-app 小程序 input v-model 双向绑定输入内容时内容闪烁自动删除字符问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

调试模式延迟通信损耗太大

更多关于uni-app 小程序 input v-model 双向绑定输入内容时内容闪烁自动删除字符问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


您报bug的姿势好像不对哦，详情：https://ask.dcloud.net.cn/article/38139

添加视频 和 代码了 ，还差啥？

请官方尽快解决此bug 测试手机 iphonex

uni-app开发小程序的时候，IOS端微信小程序遇到input输入内容的时候内容闪烁的问题,有时候自动删除已经输入的一个字符

IOS13.6.1，iPhone 6s Plus，和Android 5.1 OPPO R9m，未复现您说的问题。

那怎么办？

回复 8***@qq.com: 提供能100%复现您问题的demo附件，并说明清楚系统信息，如：手机型号、系统版本、页面类型…等.

回复 8***@qq.com: 可能是微信基础库版本过低造成的，升级一下看看

这个我也遇到了 很难受

我也遇到了，请问楼主解决了吗

两年了还没解决

是微信基础库版本过低造成的，升级一下看看

我的在oppo手机也是这个问题（打包成app），真是蛋疼，官方为什么这种bug都解决不了。 随便一个input v-model绑定下就这个问题。 oppo find x2，安卓v12

这是一个常见的uni-app小程序input双向绑定问题，通常是由于v-model绑定和输入事件冲突导致的。以下是解决方案：

  1. 使用value和@input替代v-model：
<input 
  :value="aae135"
  [@input](/user/input)="handleInput"
  maxlength="18"
/>
  1. 在methods中添加处理函数：
handleInput(e) {
  this.aae135 = e.detail.value;
}
  1. 如果问题仍然存在，可以尝试添加防抖：
handleInput: _.debounce(function(e) {
  this.aae135 = e.detail.value;
}, 300)
  1. 或者使用setTimeout延迟更新：
handleInput(e) {
  setTimeout(() => {
    this.aae135 = e.detail.value;
  }, 0);
}
回到顶部