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 未结束的字符串常量错误解决方法
Jun 13 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
玩转方法:call和apply
May 08 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
node+express制作爬虫教程
Nov 11 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python3.0 字典key排序
2008/12/24 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python用户自定义异常的实现
2020/12/25 Python
Python实现一个论文下载器的过程
2021/01/18 Python
经贸专业毕业生求职信
2014/03/23 职场文书
绿色环保口号
2014/06/12 职场文书
春游踏青活动方案
2014/08/14 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
田径运动会通讯稿
2014/09/13 职场文书
股东出资证明书范例
2014/10/04 职场文书
模范班主任事迹材料
2014/12/17 职场文书
秦兵马俑导游词
2015/02/02 职场文书
2015年征兵工作总结
2015/07/23 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python