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 相关文章推荐
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
js中replace的用法总结
Dec 27 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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输出缓存ob系列函数详解
2014/03/11 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
网站上面有这种切换效果
2006/06/26 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
js轮播图的插件化封装详解
2017/07/17 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Python中List.index()方法的使用教程
2015/05/20 Python
Python实现批量下载图片的方法
2015/07/08 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python3注册全局热键的实现
2020/03/22 Python
浅谈django 重载str 方法
2020/05/19 Python
如何清空python的变量
2020/07/05 Python
python os.rename实例用法详解
2020/12/06 Python
Python jieba库分词模式实例用法
2021/01/13 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
护理专业的自荐信
2013/10/22 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
学校四群教育实施方案
2014/06/12 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年领班工作总结
2015/04/29 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技