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 相关文章推荐
Javascript中的相等与不等运算
Apr 25 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
使用javascript获取页面名称
Dec 23 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
php精度计算的问题解析
2019/06/21 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
动态创建类实例代码
2009/10/07 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
pygame实现成语填空游戏
2019/10/29 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
tensorflow 查看梯度方式
2020/02/04 Python
python打开文件的方式有哪些
2020/06/29 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
考试违纪检讨书
2014/02/02 职场文书
理财计划书
2014/08/14 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python