JS实现页面快捷键功能

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~F12
            switch(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 + s
            if(event.ctrlKey && event.keyCode === 83){
                console.log('保存成功'); //调用对应的功能函数
            }

代码示例

	   window.onload = function() {
            window.onkeydown=function() {
                event.preventDefault();
                // F1~F12
                switch(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('保存成功');
                }
            }
        }

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

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