Dom监听组合按键

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

下面简单梳理一下思路:

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

  • 单独的按键操作,如:delete、up、down等
  • 两位组合建,如:ctrl(cmd)+ 其他按键,alt+其他按键,shift+其他按键
  • 三位组合键,如:ctrl(cmd)+ shift + 其他按键,Ctrl(cmd)+ alt + 其他按键

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

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

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

我们写一个简单的例子:


1

2

3

document.onkeydown = function(e) {

    console.log(e);

 

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

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

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

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

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

这张表介绍的比较详细,出自《JavaScript Madness不同的浏览器的keycode比较

当然使用了jquery也不用担心兼容问题了,直接使用e.keyCode即可。那怎么知道用户使用了组合键呢?

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

举一个简单的例子,监听ctrl(cmd)+ s事件:


1

2

3

4

5

6

7

8

9

document.onkeydown = function(e) {

        var keyCode = e.keyCode || e.which || e.charCode;

        var ctrlKey = e.ctrlKey || e.metaKey;

        if(ctrlKey && keyCode == 83) {

            alert(‘save‘);

        }

        e.preventDefault();

        return false;

    }

JS监听组合按键的原理基本上就是这个样子了,但是发现了一些问题,比如说:ctrl(cmd)+ w(n、q)等chrome浏览器快捷键无法进行阻止,这个不知道有没有方式进行阻止。个人猜测可能需要更高的权限才能做这件事。

介绍了原理之后,有什么更好的干货要介绍的吗?这个当然没有了。。。

这怎么可能,google是那么的强大,只有想不到没有做不到。只要你想用的,这里都有的。我在网上找到这么一个JS感觉用起来还是比较方便的。它就是shortcuts.js,官网地址。还有一个jquery版本的,github地址

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

它的使用方式是:


1

2

3

4

5

6

7

8

shortcut("[",function() {

    alert("Hi there!");

}, {

    ‘type‘:‘keydown‘//事件

    ‘propagate‘:false//是否支持冒泡

    ‘disable_in_input‘:true//是否在输入框内有效

    ‘target‘:document, //作用范围

});

可以通过在源码中扩展特殊按键,是组合按键更丰富。

如果想了解更多的信息,可以自己尝试一下~

原文地址:https://www.cnblogs.com/jinhengyu/p/9110258.html

时间: 2024-11-05 12:32:16

Dom监听组合按键的相关文章

JS监听组合按键

有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete.up.down等 两位组合建,如:ctrl(cmd)+ 其他按键,alt+其他按键,shift+其他按键 三位组合键,如:ctrl(cmd)+ shift + 其他按键,Ctrl(cmd)+ alt + 其他按键 大概只有这么几种情况了,至少我没有见过其他的情况.如果确实存在的话,基本实现的原理也

Android通过Intent.ACTION_CLOSE_SYSTEM_DIALOGS监听Home按键消息

Android对屏幕下方经常使用的四个按键消息处理是不一致的: 1.搜索按键的消息在onKeyDown或者onKeyUp中接收: 2.菜单按键的消息在onCreateOptionsMenu.onKeyDown或onKeyUp方法中接收: 3.返回按键的消息能够在onBackPressed.onKeyDown或onKeyUp方法中接收. @Override public boolean onKeyDown(int keyCode, KeyEvent event) { switch( keyCode

android 应用监听输入法按键事件【比如搜索和回车键等】的整个流程分析

继承于InputMethodService类的服务代码如下: int keyCode = sKey.getKeyCode(); KeyEvent eDown = new KeyEvent(0, 0, KeyEvent.ACTION_DOWN, keyCode, 0, 0, 0, 0, KeyEvent.FLAG_SOFT_KEYBOARD); KeyEvent eUp = new KeyEvent(0, 0, KeyEvent.ACTION_UP, keyCode, 0, 0, 0, 0, Ke

ActivityGroup中监听返回按键

如果你想使用ActivityGroup来统一管理Activity的话,当然首先这是一种很好的方法,但是如果你想在ActivityGroup里面拦截返回按键来进行统一管理的话,直接覆写onKeyDown方法是行不通的了哦,但是你可以覆写dispatchKeyEvent方法来实现,例如,现在我点击返回按钮要提示是否退出程序,代码如下: @Overridepublic boolean dispatchKeyEvent(KeyEvent event) {if (event.getKeyCode() ==

onBackPressed() 监听返回按键事件

老安卓就这样>=Android 2.0: @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) { //do you forward return true; } return super.onKeyDown(keyCode, event); } 但在今天弄安卓应用时发现

JS组合按键事件监听插件

[1].[代码] [JavaScript]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 7

Android怎样监听蓝牙耳机的按键事件

写在前面: 直接想要代码非常easy,你直接把滚动栏拉到最底端就能够看到.假设想要十分地了解为什么,那就依照我规划的一步一步来理解.下面測试环境以手头上有的「Bluedio + 红米手机」. 1.蓝牙耳机的使用 蓝牙耳机的使用说明书中都会有相关的具体使用说明,这里拣重点说明一下.除了电源开关,耳机上一般有三个键.例如以下所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2FuZ2Vhcg==/font/5a6L5L2T/fontsize/40

Android如何监听蓝牙耳机的按键事件(转)

源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「Bluedio + 红米手机」. 1.蓝牙耳机的使用 蓝牙耳机的使用说明书中都会有相关的详细使用说明,这里拣重点说明一下.除了电源开关,耳机上一般有三个键.如下所示: 它们每个都是多功能键,在不同的情况下有不同的功能.1号键的功能包括:开始播放音乐/停止插入音乐/接听电话/挂断电话:2号键的功能有:

监听DOM变化

DOM变化分为以下七种: 1. DOMSubtreeModified:在DOM结构中发生任何变化时触发:  2. DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时触发:  3. DOMNodeRemoved:在节点从其父节点中被移除时触发:  4. DOMNodeInsertedIntoDocument:在一个节点被直接插入文档中或者通过子树间接插入文档后触发.在DOMNodeInserted之后触发:  5. DOMNodeRemovedFromDocument:在一