JavaScript 监听组合按键思路及代码实现


Posted in Javascript onJuly 28, 2020

JavaScript监听组合按键

1. 思路

JavaScript 监听组合按键思路及代码实现

如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现,
当按下的组合键包含Ctrl键时,ctrlKey键会显示为true;
当按下的组合键包含Shift键、或者按键之前开启大写时,shiftkey键会显示为true;
当按下的组合键包含Alt键时,altKey键会显示为true;
当按下的组合键包含meta键(Mac电脑上 是 【⌘】、command键,非mac电脑为 是win键时,metaKey键会显示为true
另外,按下键时,可通过event获取对应键的ascii码,结合这些信息就可以对按键进行判断了

2. 代码实例

// 按下键盘事件处理函数

  onKeyDown(event) {

   const keyCode = event.keyCode || event.which || event.charCode; // 有些浏览器除了通过keyCode获取输入键code,还可以通过which,charCode获取,这么写是出于浏览器兼容性考虑

   const keyCombination = event.ctrlKey ;

   if (keyCombination && keyCode == 75) {

    console.log("按下了Ctrl + k键");

   }

  }

到此这篇关于JavaScript 监听组合按键思路及代码实现的文章就介绍到这了,更多相关JavaScript 监听组合按键内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
Node.js插件安装图文教程
May 06 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 #Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 #Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 #Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 #Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 #Javascript
vue中touch和click共存的解决方式
Jul 28 #Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
大学生职业生涯设计书
2014/01/02 职场文书
关于建议书的格式范文
2014/05/20 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python