uniapp小程序,部分 ios 真机测试出现 input 输入框内容 跳动 问题

936 阅读2分钟

前言:最近在写uniapp小程序,遇到一个问题,在此记录一下,也希望能帮助到一些小伙伴。

问题:表单输入的时候,在个别 ios 真机上面测试时,快速输入和快速删除,会发现输入的文字或者数字,有自动删除、闪动、来回跳动等现象,经过查询各种资料,以及咨询官方得知,是 v-model 惹的祸, input(uni-easyinput同理)标签身上使用 v-model 会在部分真机上面出现以上现象,所以这里可以使用以下方法来代替 v-model。

1、只拿到输入的value值,不需要数据回显

(1)如果需要边输入边拿到数据,使用 @input(输入框内容发生变化时触发) 我这里使用的是uniapp自带的 uni-easyinput 表单(input同理)

<uni-easyinput type="number" placeholder="请输入卡号" @input="settleCardChange"/>
methods: {
    settleCardChange(value){
        console.log(value);
    }
}

结果图:

11.png

12.png

(2)如果是输入完之后点击某个按钮提交的时候才需要用到value值,可以使用 @blur (输入框失去焦点时触发)来拿到 input 表单的值 (限制:不需要边输入边拿到数据)

<uni-easyinput type="number" placeholder="请输入卡号"  @blur="getCardValue" />
methods:{
	getCardValue(e){
		console.log(e.detail.value);
	},
}

结果图:

13.png

14.png

2、需要拿到value的值,并且需要数据回显

如果既需要拿到value值,又需要数据回显,就需要用到 :value 来使数据回显到输入框内,这里只能使用 @blur + :value 来实现,类似 v-model 双向绑定。(这里本人试过 @input + :value 来实现,依然有上述问题)

// 标签
<uni-easyinput type="number" :value="settleCardValue" placeholder="请输入卡号" :inputBorder="false" @blur="getCardValue"/>
// js
data() {
    return {
        settleCardValue:''
    }
}
methods:{
    getCardValue(e){
        console.log(e.detail.value);
        // 拿到value值后,赋值给 settleCardValue,以便后续使用
        this.settleCardValue = e.detail.value
    }
}

回显数据,我这边是后端返回的数据,我需要回显到 页面上,前端拿到值之后,直接赋值给 settleCardValue 即可。

methods:{
    // 商户信息回显
    dispMerchantInfoApi(){
        let obj = {
            customerId: uni.getStorageSync('customerId')
        }
        getMySettleCard(obj).then(res => {
            if (res.data.HEAD.CODE == '000') {
                // res.data.BODY.account 后端返回的数据
                // 直接赋值给 settleCardValue 即可
                this.settleCardValue = res.data.BODY.account
            }
        })
    }
}

结果图:

15.png