JS监听组合按键思路及实现过程


Posted in Javascript onApril 17, 2020

前言

我们经常用到组合键,例如alt+f4,crtl+enter。在开发中也会有这种需求。

组合键类型

单独组合,二键组合,三键组合

思路

1、获取键盘上的按键

2、阻止浏览器上的默认行为

3、执行自定义的js函数

代码例子

document.onkeydown = function(e) {
      var keyCode = e.keyCode || e.which || e.charCode;
      var altKey = e.altKey ;
      if(altKey && keyCode == 112) {
        alert("组合键成功")
      }
      e.preventDefault();
      return false;
    }

解刨

e.keyCode || e.which || e.charCode

谷歌浏览器对event.keyCode,event.charCode和event.which都兼容。

火狐浏览器对event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效。

event.which也是部分键值有效,如字母键,数字键,enter键,Backspace键等有效,对上下左右键,PgUp(33),PgDn(34)键无效。

event.charCode也是对部分键值有效,如字母键,数字键,,Backspace键等有效,对enter键,上下左右键,PgUp(33),PgDn(34)键无效。

ie浏览器中,IE8及以下浏览器对event.charCode无效,event.keyCode和event.which对大部分键值能获得,但是有少部分也不能获得。

所以该写法为兼容写法。

e.altKey,e.shiftKey,e.ctrlKey,e.metaKey

用来监听键盘上的alt,shift,ctrl,meta键。当按下这些键的时候,值会变为true。

e.preventDefault()

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
详解JavaScript函数
Dec 01 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
You might like
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python2.7的flask框架之引用js&css等静态文件的实现方法
2019/08/22 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
合作协议书
2014/04/23 职场文书
出国英文推荐信
2014/05/10 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
中国世界遗产导游词
2015/02/13 职场文书