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('保存成功');}}}

到此我们就是完整的实现了快捷键功能

如果大家还有什么其他想法，欢迎在评论区交流！