VUE实现输入完当前input后自动跳到下一个input

#直接贴代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>VUE实现输入完当前input后自动跳到下一个input</

Lengff12138

13826人浏览 · 2019-02-15 19:16:41

Lengff12138 · 2019-02-15 19:16:41 发布

#直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE实现输入完当前input后自动跳到下一个input</title>
    <style>
        .border-input {
            background: #ffffff;
            width: 60px;
            font-size: 60px;
            height: 60px;
            margin-left: 15px;
            margin-right: 15px;
            text-align: center;
            border-bottom: 1px solid #333333;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
        }

        .inputs {
            margin-top: 31px;
            display: flex;
            justify-content: center;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="inputs">
        <div v-for="(item,index) in inputList">
            <input type="text" v-model="item.val" class="border-input" @keyup="nextFocus($event,index)"
                   @keydown="changeValue(index)">
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                inputList: [{val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}],
            }
        },
        methods: {
            /*对焦到下一个input框去*/
            nextFocus(el,index) {
                var dom = document.getElementsByClassName("border-input"),
                    currInput = dom[index],
                    nextInput = dom[index + 1],
                    lastInput = dom[index - 1];
                /*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
                if (el.keyCode != 8) {
                    if (index < (this.inputList.length - 1)) {
                        nextInput.focus();
                    } else {
                        currInput.blur();
                    }
                }else{
                    if (index !=0) {
                        lastInput.focus();
                    }
                }

            },
            /*当键盘按下的时候清空原有的数*/
            changeValue(index) {
                this.inputList[index].val = "";
            }
        }
    });
</script>
</body>
</html>

#实现效果图点我查看效果

#缺点

一堆的缺点,有时间就不断的优化

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^