uniapp input真机调试 输入数字会不断的跳动

uniapp input真机调试 ios输入数字会不断的跳动

我不知道其他人有没有遇到过这样子的问题，下面我来说一下问题和解决方案吧。

问题描述：

uni-app 写微信小程序时，在input框输入数字的时候，如果重复输入一样的数字或者输入数字过快的情况下，输入框里面的内容就会出现闪跳，怎么描述呢？嗯….  , 就是会输入了不出来，然后过一会出来一堆，然后不操作input框里面的内容自己又会删除一部分。

出bug机型： IOS 手机

由于我个人在开发工具和自己的手机（安卓机）上面测试都没有发现，在上线前同事的ios手机测试出来这样子的bug。我次日就在网上搜索一下确实有人会遇到这样的问题。下面来分享一下解决方案吧。

解决方案：

网上的方案 1： 将 v-model 替换成 :value/ @input

代码如下：

<!-- 出bug的代码 -->
<input type="idcard" class="input" v-model="idcard" />

<!-- 网上给出的方案 -->
<input type="idcard" class="input" :value="idcard" @input="changeInput($event)" />

changeInput(e){
    this.idcard = e.target.value
    console.log(this.idcard)
},

结果： 这是网上普遍的解决方案，但是我在真机上测试的时候还是不能完全解决，输入快的时候还是会出现闪跳。（当时内心很郁闷，因为着急上线）

网上的方案 2： 利用定时器间接赋值给value

changeInput(e){
    setTimeout(() => {
        this.idcard = e.target.value
    }, 0)
    console.log(this.idcard)
},

结果：这个方案我真机测试，bug依旧，但是我看别人测试是ok的，我也不知道我的问题出在了哪里。（郁闷持续中… ….）

我自己的方案： 野路子、野路子

我不记得我在哪里看过一篇文章了，是微信原生开发小程序时遇到的bug，我就结合了一下两个bug的特性，自己写了一下，代码如下：

<!-- 出bug的代码 -->
<input type="idcard" class="input" v-model="idcard" />

<!-- 我自己写的代码，亲测解决bug -->
<input type="idcard" class="input" @input="changeInput($event)" />

不仔细看看不出来有什么不同，我把 :value=”idcard” 去掉了。（不要问我原因，我真不知道为啥子！！！）

JS代码：

changeInput(e){
    setTimeout(() => {
        this.idcard = e.target.value
    }, 0)
    console.log(this.idcard)
},

区别不是很大，但是就是解决了这个问题，bug一次也没有出现了，我好想知道原因啊，哪位大牛知道的话可以找我，我想要学习一下。万分感谢！

—— 微信小程序学习资源下载—–

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程，小月博客持续更新…