Dom监听组合按键
JS监听组合按键
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。
下面简单梳理一下思路:
我们所熟悉的按键有这么集中类型:
- 单独的按键操作,如: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, //作用范围 }); |
可以通过在源码中扩展特殊按键,是组合按键更丰富。
如果想了解更多的信息,可以自己尝试一下~
Dom监听组合按键的更多相关文章
- JS监听组合按键
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...
- 【转】keyCode对照表及JS监听组合按键
原文: http://blog.csdn.net/qq_21386275/article/details/67640576 有一些需求,html 页面上的input 框只允许输入数字, 只允许输入小 ...
- 92. extjs specialkey监听回车按键
转自:http://blog.sina.com.cn/s/blog_647a022e0101401n.html 1 监听表单字段事件: Ext使得对用户某个动作的监听特别简单,诸如单击某个元素或者按下 ...
- android监听虚拟按键的显示与隐藏【转】
本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...
- Android通过Intent.ACTION_CLOSE_SYSTEM_DIALOGS监听Home按键消息
Android对屏幕下方经常使用的四个按键消息处理是不一致的: 1.搜索按键的消息在onKeyDown或者onKeyUp中接收: 2.菜单按键的消息在onCreateOptionsMenu.onKey ...
- iOS 监听声音按键
有时在项目中需要监听用户是否按下了物理声音键,然后来做某些操作,如:你自定义了一个照相功能,希望用户按下声音按键时也能进行拍照,苹果自带的照相机就有这种功能. 监听物理声音键是否按下的方法有很多中,我 ...
- Fullscreen API与DOM监听API
前言 以下几个API,在web开发中可以简化我们一部分交互操作. Fullscreen API 有时候我们想要全屏预览的效果,比如类似于图片预览.幻灯片播放等.全屏API是一个很好的选择. 基本用法 ...
- WPF之监听组合键事件
private void KeyDown(object sender, KeyEventArgs e) { if (e.Key== Key.Up && Keyboard.Modifie ...
- js 监听组合键盘事件
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete.up.down等 两位 ...
随机推荐
- Ubuntu 中/etc/resolv.conf 文件修改丢失的解决方案
方法一 1.需要创建一个文件/etc/resolvconf/resolv.conf.d/tail sudo vi /etc/resolvconf/resolv.conf.d/tail 2.在该文件中写 ...
- 【Android】Activity 生命周期具体解释
与其它编程模式不同,android中的Activity没有main()函数.我们无法决定Activity的创建和销毁过程,Activiy的创建和销毁(即生命周期)由系统完毕,系统会在Activity的 ...
- Win下执行Swing程序的BAT文件 和 Linux下执行Swing程序的SH文件
BAT文件: @echo off set CLASSPATH_BAK=%CLASSPATH% set classpath=%CLASSPATH%;.\lib\commons-codec-1.3.jar ...
- 同步网络时间到linux服务器(先修改时区再进行同步网络时间)
查看时区:date -R 修改整个系统时区: rm -f /etc/localtime ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 网 ...
- javaWeb注册,登陆,注销功能的实现
一:注册页面:regist.jsp: <%@ page language="java" contentType="text/html; charset=UTF-8& ...
- win7编程接口的一些变化
原文链接:http://www.nirsoft.net/articles/windows_7_kernel_architecture_changes.html Windows 7 introduces ...
- 【CentOS6.5】安装之DNS配置错误,yum install 软件报错:ERROR 6或者56错误提示”could not retrieve mirrorlist http://mirrorlist.centos.org ***”
刚安装完CentOS,使用yum命令安装一些常用的软件,使用如下命令:yum grouplist | more. 提示如下错误信息: Loaded plugins: fastestmirror Set ...
- c#中用DirectShow实现媒体播放器
原文地址:https://www.cnblogs.com/aiqingqing/p/4338448.html 用.net做多媒体开发的似乎不多,所以网上资源也少,看的人更少.不过我的博客上居然还有几位 ...
- tsung的配置使用
1.在root下新建.tsung文件,在.tsung文件新建log文件夹..tsung文件用于存放log和xml文件 2.复制/usr/local/tsung/share/doc/tsung/exam ...
- C#:转换类型(待补充)
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace MyCo ...