前端四位验证码四格验证码

前两天接到一个需要做一个四位的验证码,简单说一下思路. 着急的可以直接看最后,直接复制使用;

首先最简单的方法就是一个输入框 让用户输入就好了,但是身为一个程序员怎么能没有自己的想法呢,于是我想到了下面这种方法,实现方法在下面:

 

 

 首先思路是我能不能写个input,然后定位到上面,然后下方是四个小input或者span,div之类的的打底

<div style="display: flex;justify-content: space-around;align-items: center;padding: 20rpx;">
                <input type="text" class="key-input" v-model="inputValue" :focus="ShowCode" maxlength="4" />
                <div class="fouce" :style="{left:left}">I</div>
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[0]" />
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[1]" />
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[2]" />
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[3]" />
</div>

 

 

 

 我采用的是五个input,四个做底,一个通过定位放在上面;

这样做完之后发现有个问题  就是我们定位的那个input  需要把字给不显示,通过opacity:0,结果发现输入的字还是显示,然后就通过定位偏差解决了,通过left:-100%;以及其它配合完美解决;

底层input样式:

    .hiddenInput {
        width: 80rpx;
        height: 120rpx;
        border: 1px solid #ccc;
        margin-right: 20rpx;
        text-align: center;
        font-size: 50rpx;
    }

上层输入框样式:

    .key-input {
        width: 200%;
        height: 80px;
        position: absolute;
        left: -100%;
        line-height: 50px;
        padding: 0 4px;
        letter-spacing: 49px;
        box-sizing: border-box;
        text-indent: 21px;
        appearance: none;
        border: transparent;
        font-size: 18px;
        color: transparent;
        text-shadow: 0 0 0 #02b8cd;
        z-index: 99999999;

    }

包含输入框的div样式:

    .fouce {
        position: absolute;
        height: 150rpx;
        font-size: 40px;
        top: 70rpx;
        animation: an2 .5s infinite;
    }

　　@keyframes an2 {
　　　　to {
　　　　　　color: transparent;
　　　　}
　　}

这里说一下使用animation: an2 .5s infinite的原因

因为没加这个之前  发现用户输入解决了,但是光标的问题用户看不到,就会造成一些疑惑,所以使用animation进行模拟光标的跳动;这些加完 貌似没有问题了,但是实践中发现  删除的时候光标还有问题,还有一个就是 用户复制粘贴了超过四个字符,光标也会有问题,然后我添加了watch完美解决:

        watch: {
            "inputValue": {
                handler(newValue, old) {
                    const self = this;
                    console.log(newValue)
                    self.left = newValue.length == 0 ? '70rpx' : newValue.length == 1 ? '180rpx' : newValue.length == 2 ?
                        '280rpx' : newValue.length == 3 ? '380rpx' : '380rpx'
                    if (newValue.length == 4) {
                        if (newValue == self.Code) {
                            self.$emit('next')
                        } else {
                            console.log(self.newValue)
                        }
                    }
                }
            }
        },

然后就可以根据自己业务需求进行测试了.

完整代码如下:可以直接复制使用  采用components引用:

<template>
    <div>
        <u-popup v-model="ShowCode" mode="center" :mask-close-able="false">
            <view style="text-align: center;">车架号后四位</view>
            <div style="display: flex;justify-content: space-around;align-items: center;padding: 20rpx;">
                <input type="text" class="key-input" v-model="inputValue" :focus="ShowCode" maxlength="4" />
                <div class="fouce" :style="{left:left}">I</div>
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[0]" />
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[1]" />
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[2]" />
                <input class="hiddenInput" type="number" :maxlength="1" v-model="inputValue[3]" />
            </div>
        </u-popup>
    </div>
</template>

<script>
    export default {
        props: {
            Code: {
                type: String,
                default () {
                    return '';
                }
            },
            ShowCode: {
                type: Boolean,
                default () {
                    return false
                }
            }
        },
        data() {
            return {
                inputValue: '',
                left: '70rpx'
            }
        },
        onShow() {
            this.inputValue = ''
        },
        watch: {
            "inputValue": {
                handler(newValue, old) {
                    const self = this;
                    console.log(newValue)
                    self.left = newValue.length == 0 ? '70rpx' : newValue.length == 1 ? '180rpx' : newValue.length == 2 ?
                        '280rpx' : newValue.length == 3 ? '380rpx' : '380rpx'
                    if (newValue.length == 4) {
                        if (newValue == self.Code) {
                            self.$emit('next')
                        } else {
                            console.log(self.newValue)
                            uni.showModal({
                                title: '验证失败',
                                content: '请输入正确的车架号后四位.',
                                showCancel: false,
                            })
                        }
                    }
                }
            }
        },
        components: {},
        mounted() {},
        methods: {

        }
    }
</script>


<style lang="scss" scoped>
    .fouce {
        position: absolute;
        height: 150rpx;
        font-size: 40px;
        top: 70rpx;
        animation: an2 .5s infinite;
    }

    @keyframes an2 {
        to {
            color: transparent;
        }
    }

    .hiddenInput {
        width: 80rpx;
        height: 120rpx;
        border: 1px solid #ccc;
        margin-right: 20rpx;
        text-align: center;
        font-size: 50rpx;
    }

    .key-input {
        width: 200%;
        height: 80px;
        position: absolute;
        left: -100%;
        line-height: 50px;
        padding: 0 4px;
        letter-spacing: 49px;
        box-sizing: border-box;
        text-indent: 21px;
        appearance: none;
        border: transparent;
        font-size: 18px;
        color: transparent;
        text-shadow: 0 0 0 #02b8cd;
        z-index: 99999999;

    }
</style>