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渐变发光导航菜单的实例代码
Mar 27 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
jQuery动画与特效详解
Feb 01 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 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原创论坛
2006/10/09 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python set内置函数的具体使用
2019/07/02 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
PHP如何与mysql建立链接
2013/05/05 面试题
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
文明演讲稿范文
2014/05/12 职场文书
专项法律服务方案
2014/06/11 职场文书
毕业生面试求职信
2014/06/23 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
党建工作整改措施
2014/10/28 职场文书
学生检讨书范文
2014/10/30 职场文书
暂住证证明
2015/06/19 职场文书
六年级作文之自救
2019/12/19 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
nginx常用配置conf的示例代码详解
2022/03/21 Servers