原生 js 实现验证码输入效果

最新推荐文章于 2024-04-16 05:21:32 发布

逆风优雅

最新推荐文章于 2024-04-16 05:21:32 发布

阅读量1.9k

点赞数 7

分类专栏： js 开发小技巧总结文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44603011/article/details/135250916

版权

开发小技巧总结同时被 2 个专栏收录

147 篇文章 6 订阅

订阅专栏

63 篇文章 1 订阅

订阅专栏

原理：第一个输入框获取焦点，输入完内容后，后面的自动获取焦点，当删除的时候，当前删除完之后，前面的自动获取焦点删除

<div class="xl-flex ">
                                    <div class="input-item">
                                        <input type="text" id='input1' v-model='state.code[0]' maxlength=1 @input = 'handleInput(1)' @keydown.delete="inputValueDelete(1)"  placeholder="0" >
                                    </div>
                                    <div class="input-item">
                                        <input type="text" id='input2' @input = 'handleInput(2)' @keydown.delete="inputValueDelete(2)" v-model='state.code[1]' placeholder="0" maxlength='1'>
                                    </div>
                                    <div class="input-item">
                                        <input type="text" id='input3' @input = 'handleInput(3)' @keydown.delete="inputValueDelete(3)" v-model='state.code[2]' placeholder="0" maxlength='1'>
                                    </div>
                                    <div class="input-item">
                                        <input type="text" id='input4' @input = 'handleInput(4)' @keydown.delete="inputValueDelete(4)" v-model='state.code[3]' placeholder="0" maxlength='1'>
                                    </div>
                                    <div class="input-item">
                                        <input type="text" id='input5' placeholder="0" maxlength='1' @input = 'handleInput(5)' @keydown.delete="inputValueDelete(5)" v-model='state.code[4]'>
                                    </div>
                                    <div class="input-item">
                                        <input type="text" id='input6' @input = 'handleInput(6)'  @keydown.delete="inputValueDelete(6)" v-model='state.code[5]' placeholder="0" maxlength='1'>
                                    </div>
                                </div>

function handleInput(inputNum:any) {

    var currentInput = document.getElementById('input' + inputNum);
    //   currentInput.style.border = '2px solid #17B26A'
    
    var nextInputNum = inputNum + 1;
    var nextInput = document.getElementById('input' + nextInputNum);
    
    if (currentInput.value.length === 1) { // 检查当前输入框的值是否为一个数字
        if (nextInput) { // 如果存在下一个输入框
            nextInput.focus(); // 设置下一个输入框获取焦点
        } else {
            currentInput.blur(); // 如果当前输入框是最后一个，则取消焦点，结束输入流程
        }
    }

}

const inputValueDelete = (inputNum:any)=>{
    var currentInput = document.getElementById('input' + inputNum); // 当前input 
     var preInputNum = inputNum - 1;
    var preInput = document.getElementById('input' + preInputNum);

     if (currentInput.value=='') { // 如果当前输入框没有值
            preInput.focus(); // 设置上一个输入框获取焦点
            currentInput.blur(); // 如果当前输入框是最后一个，则取消焦点，结束输入流程
    }else{
        nextInput.focus()
    }
}