demo：http://118.25.55.180:2957/

简介

通过自定义按键，以达到控制页面表格等元素切换的功能；

npm i chu-switch-tab

使用场景

在网页中，正常情况下是可以使用tab shift+tab切换例如input select button此类组件的选中聚焦等状态

但实际操作中可能觉得组合键太复杂，或者与数字键相隔甚远需要用上下左右等按键达到此类效果

所以诞生了此组件

实现原理

• 初始思路：按下其它键位的时候触发tab 的keydown事件，以直接达到目的

• 实际情景：在使用js模拟触发tab的 keydown事件时，实际并不能达到此种效果，模拟事件执行了但没有触发相应功能

• 实现思路：在经过思考后，采用了以下方法
  在需要切换的元素父标签上增加id标识，然后通过js拿到下面所有符合的子元素；
  添加监听事件，当设置的按键触发了keydown事件后，循环匹配定位到当前元素
  最后根据需要执行的方向去切换选中元素，利用focus事件即可

因KeyboardEvent的keycode属性即将被遗弃

所以此代码中使用的是key字段，下面附录有对应码表

使用

1. 使用前须先添加事件：addKeydownEvent、removeKeydownEvent

• addKeydownEvent 注册监听事件，在页面加载完成或你需要的地方添加此事件
• removeKeydownEvent 卸载事件，在页面销毁时或你需要的地方添加此事件

2. 在需要使用的元素父标签添加类或id

3. 使用setUpKey函数自定义配置
   setUpKey({mainBodyElName: '#id'})

{
  mainBodyElName: '',  // 主体元素类名，必填，如：'#id' '.myForm'
  preBtnKey: 'ArrowUp',// 上一个按钮 ，非必填，默认方向键 ↑，key值见附录
  nextBtnKey: 'ArrowDown', // 下一个按钮 ，非必填，默认方向键 ↓，key值见附录
  matchingEl: ['input'], // 匹配元素，非必填，默认input标签，接受数组格式
  callbackFucForMe: null, // 回调函数，非必填，切换完成后触发，可通过此处配置自定义事件
}

详细实例

在vue中使用

1. 引入import tabSwtich from 'path/index.js'

2. 在需要的input标签外层元素添加class class="myForm"

3. 注册事件，添加配置

mounted() {
 tabSwtich.addKeydownEvent();
 tabSwtich.setUpKey({
   mainBodyElName: '.myForm',  
   preBtnKey: 'ArrowUp',
   nextBtnKey: 'ArrowDown', 
   matchingEl: ['input'], 
   callbackFucForMe: ()=>{
     console.log('切换成功了！')
   }
 }) 
}
beforeDestroy() {
 tabSwtich.removeKeydownEvent()
}

react中只需要修改mounted beforeDestroy为对应生命周期即可
原生中类似

注意点

1. 请不要在页面多次添加监听事件!
2. 若使用+ - < >此类输入性按键切换，记得在输入框内过滤
3. select此类标签切换后需要关闭下拉框，可在回调事件callbackFucForMe中添加

github
npm

附录

KeyboardEvent KEY MDN地址

key 键码表

若无法查询对应key值，可以使用keydown事件查看