【Vue/Uni-app】实现类支付宝验证码输入功能

TIM图片20190802135238.png

最近在做登录验证的时候，感觉单纯的让用户输入一串数据有点Low，突然又想起来马爸爸的支付宝在付款输密码用的验证框非常有意思，于是就稍做借鉴和修改了一版出来，下面放代码。

1. 页面布局 （包一层主要是为了解决IOS光标移位的问题）

<view class="check">
    <input class="checkInput" ref="check1" type="number" focus maxlength="1" @input="checkInput(1)" />
</view>
<view class="check">
    <input class="checkInput" ref="check2" type="number" maxlength="1" @input="checkInput(2)" />
</view>
<view class="check">
    <input class="checkInput" ref="check3" type="number" maxlength="1" @input="checkInput(3)" />
</view>
<view class="check">
    <input class="checkInput" ref="check4" type="number" maxlength="1" @input="checkInput(4)" />
</view>
<view class="check">
    <input class="checkInput" ref="check5" type="number" maxlength="1" @input="checkInput(5)" />
</view>
<view class="check">
    <input class="checkInput" ref="check6" type="number" maxlength="1" @input="checkInput(6)" />
</view>

2.CSS

.check {
    height: 103upx;
    width: 15%;
    margin-left: 2upx;
    border: 1px solid white;
    display: inline-block;
    color: white;
}

.checkInput {
    padding: 32upx;
    z-index: 999;
    font-size: 0.75rem;
}

3.JS方法实现

checkInput(index) {
    var nextIndex = 1;
    //获取当前输入值
    let value = this.$refs["check" + index].inputValue;

    if (value.trim() === "") {
        nextIndex = index === 1 ? 1 : index - 1;
    } else {
        nextIndex = index + 1;
    }
    //nextIndex取值区间为1~7
    //1~6可以视为验证码的更改，7为自动提交
    if (nextIndex === 7) {
        this.checkLogin()
    } else {
        this.$refs["check" + nextIndex].$refs.input.focus()
    }
},

缺点:在未输入任何数据时，中途退格会失效（可以考虑将focus改成select，如果大家有更好的方案，可以一起交流。）