JS实现页面快捷键功能
JS实现页面快捷键功能一共分为三步：
- 第一步：绑定
onkeydown事件； - 第二步：阻止默认按键功能；
- 第三步：验证键码，调用功能函数；
绑定事件
首先，实现页面快捷键我们需要用到 onkeydown事件,onkeydown 事件会在用户按下键盘时触发。
我们将其绑定到 window上：window.onkeydown。
阻止默认功能
然后，通过event.preventDefault() 方法阻止掉按键原有的功能，为我们绑定上新的功能做好准备工作。
ps: 当然 event.preventDefault()使不使用 ，怎么使用视情况而定。
验证键码
最后，根据键码判断验证后调用需要绑定的功能函数。
当然，在判断之前，首先我们得知道需要绑定快捷键的键码。
获取键码
获取键码,可以网上查表，但我认为没有让浏览器告诉我们来的方便。
绑定好onkeydown事件和hotkey ()函数，并打开控制台再点击一下页面后按下需要查看键码的按键，控制台就会输出对应的键码。
window.onkeydown = function () {console.log(event.keyCode);}
知道了对应按键的键码后，就可以通过条件判断语句验证绑定对应的功能函数。
单键快捷键
知道了按键的键码后，我们就可以实现单键快捷键功能。
例如：为F1~F12添加快捷键
window.onkeydown = function () {event.preventDefault();// F1~F12switch(event.keyCode){case 112: console.log('f1'); break;case 113: console.log('f2'); break;case 114: console.log('f3'); break;case 115: console.log('f4'); break;case 116: console.log('f5'); break;case 117: console.log('f6'); break;case 118: console.log('f7'); break;case 119: console.log('f8'); break;case 120: console.log('f9'); break;case 121: console.log('f10'); break;case 122: console.log('f11'); break;case 123: console.log('f12'); break;}}
组合键快捷键
但知道了单键的键码，只能设置单键快捷键，设置组合键快捷键还需要使用功能键；
功能键ctrl、shift、alt分别对应event.ctrlKey、event.shiftKey、event.altKey。
它们的默认值是false,当对应的按键被按下时值变为true。
知道了功能键怎么用，我们就可以设置组合键快捷键。
例如：添加ctrl + s快捷键
// ctrl + sif(event.ctrlKey && event.keyCode === 83){console.log('保存成功'); //调用对应的功能函数}
代码示例
window.onload = function() {window.onkeydown=function() {event.preventDefault();// F1~F12switch(event.keyCode){case 112: console.log('f1'); break;case 113: console.log('f2'); break;case 114: console.log('f3'); break;case 115: console.log('f4'); break;case 116: console.log('f5'); break;case 117: console.log('f6'); break;case 118: console.log('f7'); break;case 119: console.log('f8'); break;case 120: console.log('f9'); break;case 121: console.log('f10'); break;case 122: console.log('f11'); break;case 123: console.log('f12'); break;}console.log(event.keyCode);if(event.ctrlKey && event.keyCode === 83){console.log('保存成功');}}}
到此我们就是完整的实现了快捷键功能
如果大家还有什么其他想法，欢迎在评论区交流！
