JS监听组合按键

谁借莪１个温暖的怀抱￠ 2022-05-14 09:22 141阅读 0赞

本文转自：[https://www.cnblogs.com/xiaoheimiaoer/p/4716191.html][https_www.cnblogs.com_xiaoheimiaoer_p_4716191.html] 。

有些时候，我们需要在网页上，增加一些快捷按键，方便用户使用一些常用的操作，比如：保存，撤销，复制、粘贴等等。

下面简单梳理一下思路：

我们所熟悉的按键有这么集中类型：

*  单独的按键操作，如：`delete`、`up`、`down`等
 *  两位组合建，如：`ctrl（cmd）`\+ 其他按键，`alt`\+其他按键，`shift`\+其他按键
 *  三位组合键，如：`ctrl（cmd）`\+ `shift` \+ 其他按键，`Ctrl（cmd）`\+ `alt` \+ 其他按键

大概只有这么几种情况了，至少我没有见过其他的情况。如果确实存在的话，基本实现的原理也比较类似，本文就不再赘述了。

上面这三种情况， 都要处理的一个关键问题是阻止默认行为：比如删除按键，保存网页按键，保存书签等等，这些网页上的默认行为都需要阻止掉。另外一个就是监听按键，然后根据自己的需求，处理相应的事件。

基于上面提到的需要做的两件事，我们结合代码详细理解一下。

我们写一个简单的例子：

document.onkeydown = function(event) { 
        console.log(event);
    }

这个页面，在我们按键的时候会执行这个方法，以a按键为例，会打印一下结果：

![打印a按键][a]

这个事件有很多的属性和方法，这里我们不会一一进行说明，只是挑出来我们比较感兴趣的几个进行说明。

对照上面提到需要处理的两件事：

第一阻止默认事件，在W3C标准和IE下，处理方式不太一致。分别是执行`event.preventDefault()`方法和将`event.returnValue = false`属性。当然如果你使用的jQuery等类库的话，只需要写一个`event.preventDefault()`就可以了，它帮你做到了兼容。

第二监听按键类型，按键分两种情况，一种是单独按键（只有一个键），一种是组合键（两个以上按键）。单独按键需要监听事件的`keyCode`、`charCode`和`which`属性。

这张表介绍的比较详细，出自《[JavaScript Madness不同的浏览器的keycode比较][JavaScript Madness_keycode]》

![JavaScript Madness不同的浏览器的keycode比较][JavaScript Madness_keycode 1]

当然使用了jQuery也不用担心兼容问题了，直接使用`event.keyCode`即可。那怎么知道用户使用了组合键呢？

我们看到事件还有这么几个属性：`ctrlKey`（`metaKey`）、`altKey`、`shiftKey`，当你同时按下组合键的时候，这几个属性会变成true，所以组合键就可以通过监听按键code和这几个属性的状态进行判断了。

举一个简单的例子，监听`ctrl`（`cmd`）+ `s`事件：

document.onkeydown = function(event) {
        var keyCode = event.keyCode || event.which || event.charCode;
        var ctrlKey = event.ctrlKey || event.metaKey;
        if(ctrlKey && keyCode == 83) {
            event.preventDefault();
            alert('save');
        }
        // event.preventDefault(); // 注意：阻止默认事件不能放在外面，会阻止浏览器或者input/textarea的默认事件，应该放在相应的按键组合中去阻止
        return false;
    }

JS监听组合按键的原理基本上就是这个样子了。

当然GitHub上面也有封装好的插件[shortcuts.js官网][shortcuts.js] ，还有一个jquery版本的，[github地址][github]。

shortcuts.js支持单独按键和组合按键，同时可以通过配置是组合按键在输入框内失效。

它的使用方式是：

shortcut("[",function() { 
        alert("Hi there!");
    }, {
        'type':'keydown', //事件
        'propagate':false, //是否支持冒泡
        'disable_in_input':true, //是否在输入框内有效
        'target':document, //作用范围
    });

[https_www.cnblogs.com_xiaoheimiaoer_p_4716191.html]: https://www.cnblogs.com/xiaoheimiaoer/p/4716191.html
[a]: /images/20220514/13c057085e204df995b43d90281cbbab.png
[JavaScript Madness_keycode]: http://www.cnblogs.com/ahjesus/archive/2011/11/03/2234776.html
[JavaScript Madness_keycode 1]: /images/20220514/020820956a684f548a86d15faac200d7.png
[shortcuts.js]: http://openjs.com/scripts/events/keyboard_shortcuts/
[github]: https://github.com/jeresig/jquery.hotkeys