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省市联动实现代码
Feb 15 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
Node.js assert断言原理与用法分析
Jan 04 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
layui导出所有数据的例子
Sep 10 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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中echo和print的区别
2014/08/28 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
YII框架关联查询操作示例
2019/04/29 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
竞选班长演讲稿
2013/12/30 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
期中考试反思800字
2014/05/01 职场文书
班组建设经验交流材料
2014/05/12 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
工作检讨书大全
2015/01/26 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python