Vue操作当前input输入框，求教！_前端问题_站长_知道

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

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

求大神教一教

已解决悬赏分：80 - 解决时间 2022-01-16 13:34

点赞 0反对 0举报 0 收藏 0

回答5

最佳

@osmcc

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 在线实例




 
支持 0
反对 0
举报


                            
                            2022-01-16 10:40


 

                        

                        
                            
@zmz199814

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


 
支持 0
反对 0
举报


                            
                                2022-01-16 11:21
                        


                        

                        
                            
@1194230792

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


 
支持 0
反对 0
举报


                            
                                2022-01-16 11:44
                        


                        

                        
                            
@q8682515

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


 
支持 0
反对 0
举报


                            
                                2022-01-16 12:15
                        


                        

                        
                            
@kxwl521

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


 
支持 0
反对 0
举报


                            
                                2022-01-16 12:36