TAB 切换无效问题

341 阅读1分钟

问题背景

form 表单文本框 tab 切换不生效,使用 focus() 也不生效,tabIndex 也不生效。

问题分析

项目中引入的其他插件阻断了按键事件。

可以通过浏览器控制台中的元素的事件侦听看到当前页有哪些事件监听。从而得到是哪个插件事件影响了tab切换。

image.png

问题修复

给元素绑定 keydown 事件,在其他事件监听动作完成后,执行 focus()

  <el-input
    ref="password"
    type="password"
    @keydown.tab.native="tabHandle"
  />
tabHandle() {
   setTimeout(() => this.$refs.password.focus(), 0);
}