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

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字段，下面附录有对应码表

使用 使用前须先添加事件：addKeydownEvent、removeKeydownEvent addKeydownEvent 注册监听事件，在页面加载完成或你需要的地方添加此事件 removeKeydownEvent 卸载事件，在页面销毁时或你需要的地方添加此事件

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

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

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

在vue中使用

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

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

注册事件，添加配置

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

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

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

github
npm

附录

KeyboardEvent KEY MDN地址

key 键码表

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