Vue操作当前input输入框，求教！

Question

刚接触vue
想尝试做多个input输入框，然后拼成一个ip地址
每个输入框最多输入3个数字，每当长度=3后就键盘自动按下tab

我用计算属性把他们拼起来了，
但就是不知道怎么才能让他们自动tab！！不知道这是不是和dom操作有关

求大神教一教

Answer 1

let index = 1
const dftBinding = (binding={}) => {
    return {
        index: index++,
        max: 3,
        ...binding
    }
}

Vue.directive('tab', {
    bind(el, binding={}){
        if(!el instanceof HTMLInputElement) throw 'v-tab只能用于input标签!'
        binding = dftBinding(binding)
        console.log(binding)
        el.setAttribute('tabindex', binding.index)
        el.addEventListener('input', e=>{
            console.log(e.target.value)
            if(e.target.value.length>=binding.max) {
                el.blur()
                const next = document.querySelector(`[tabindex="${binding.index+1}"]`)
                console.log(next)
                next && next.focus()
            }
        })
    }
})

    <input type="number" v-tab="{index:0}">
    <input type="number" v-tab="{index:1}">
    <input type="number" v-tab="{index:2}">
    <input type="number" v-tab="{index:3}">

codepen 在线实例

Answer 2

lowlow版本
https://codepen.io/voggen/pen...

Answer 3

每个input 给个ref 属性并监听change事件或者监听键盘按下或弹起事件,进行处理
如果符合条件,则获取下个ref元素并获取焦点,大致思路

Answer 4

这个问题的本质不是按下Tab键，而是本输入框满足条件后下一个输入框自动获取焦点。因此将思路放在下一个Input输入框自动获得焦点上。

Answer 5

可以试试给每个input输入框进行数据绑定，并进行校验,也可以直接设置maxlength=3，当每个输入框输入内容满足条件后，点击tab会自动跳转到下一个输入框里的。