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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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
DIY实用性框形天线
2021/03/02 无线电
用PHP连接Oracle数据库
2006/10/09 PHP
php的ajax简单实例
2014/02/27 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
使用python实现扫描端口示例
2014/03/29 Python
Python FTP操作类代码分享
2014/05/13 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python的else子句使用指南
2016/02/27 Python
opencv与numpy的图像基本操作
2019/03/08 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
求网格中的黑点分布
2013/11/06 面试题
应届生体育教师自荐信
2013/10/03 职场文书
前台接待岗位职责
2013/12/03 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang