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 中的 delete及delete运算符
Nov 15 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JavaScript中的this基本问题实例小结
Mar 09 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
小程序实现上下切换位置
Nov 16 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
一个程序下载的管理程序(三)
2006/10/09 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python决策树之C4.5算法详解
2017/12/20 Python
python实现简单神经网络算法
2018/03/10 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
花卉与景观设计系大学生求职信
2013/10/01 职场文书
前处理班长职位说明书
2014/03/01 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
十佳护士先进事迹
2014/05/08 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
2014年文秘工作总结
2014/11/25 职场文书
建国大业观后感
2015/06/01 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
深入理解Pytorch微调torchvision模型
2021/11/11 Python