Vue项目手机验证码输入框制作

最新推荐文章于 2024-09-10 13:51:16 发布

一枕黄粱-web

最新推荐文章于 2024-09-10 13:51:16 发布

阅读量967

点赞数 1

分类专栏： vue 文章标签：手机验证码输入框

本文链接：https://blog.csdn.net/jstljspservlet/article/details/90478222

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

博客围绕手机验证码输入框展开，但具体内容未给出。手机验证码输入框在信息技术领域常用于用户身份验证等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <div class="number-input" id="my-vcode">
            <input type="tel" maxlength="1" v-model="fourNumerObj.input1" id="input1" @input="getNextFocus(1)"/>
            <input type="tel" maxlength="1" v-model="fourNumerObj.input2" id="input2" @input="getNextFocus(2)"/>
            <input type="tel" maxlength="1" v-model="fourNumerObj.input3" id="input3" @input="getNextFocus(3)"/>
            <input type="tel" maxlength="1" v-model="fourNumerObj.input4" id="input4" @input="getNextFocus(4)"/>
            <input type="tel" maxlength="1" v-model="fourNumerObj.input5" id="input5" @input="getNextFocus(5)"/>
            <input type="tel" maxlength="1" v-model="fourNumerObj.input6" id="input6"/>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'login',
        data() {
            return {
                fourNumerObj: {
                    input1: '',
                    input2: '',
                    input3: '',
                    input4: '',
                    input5: '',
                    input6: ''
                }
            }
        },
        components: {},
        mounted: function () {
            //  手机删除按钮监听事件，验证码连续删除
            let vcodeInput = document.getElementById('my-vcode');
            let inputArr = vcodeInput.getElementsByTagName('input');
            for (let i = 0; i < inputArr.length; i++) {
                inputArr[i].addEventListener('keydown', function (event) {
                    var evt = event || window.event;
                    if (inputArr[i].value === '' && evt.keyCode === 8) {
                        // 如果为空且按下退回键
                        if (i !== 0) {
                            inputArr[i - 1].focus();
                        }
                    }
                })
            }
        },
        methods: {
            getNextFocus: function (param) {
                let curInputObj = document.getElementById('input' + param);
                let nextInputObj = document.getElementById('input' + (param + 1));
                // 如果当前input的值不为空，且下一个input的值为空，下一个input设置聚焦
                if (param && (curInputObj.value || curInputObj.value === 0) && !nextInputObj.value && nextInputObj.value !== 0) {
                    nextInputObj.focus();
                }
            }
        }
    }
</script>

<style scoped>
    .number-input {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 100px auto;
    }

    .number-input input {
        border: none;
        border-bottom: 1px solid #dcdcdc;
        margin: 0 10px;
        width: 30px;
        font-size: 18px;
        height: 44px;
        line-height: 44px;
        text-align: center;
    }
</style>