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 性能优化指南(2)
May 21 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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(6) 面向对象
2010/02/16 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
不要用强制方法杀掉python线程
2017/02/26 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python读取并写入mat文件的方法
2019/07/12 Python
python线程join方法原理解析
2020/02/11 Python
python线性插值解析
2020/07/05 Python
详解python内置模块urllib
2020/09/09 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
企业指导教师评语
2014/04/28 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
单位车辆管理制度
2015/08/05 职场文书
文明礼仪主题班会
2015/08/13 职场文书
建议书的格式及范文
2015/09/14 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
MySql数据库触发器使用教程
2022/06/01 MySQL