Vue操作当前input输入框,求教!

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

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

求大神教一教

阅读 3.5k
5 个回答
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 在线实例

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题