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代码
May 27 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
简单谈谈JS中的正则表达式
Sep 11 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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输入流php://input介绍
2012/09/18 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
php实现的用户查询类实例
2015/06/18 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
Python编写一个闹钟功能
2017/07/11 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
关于python中导入文件到list的问题
2020/10/31 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
关于保护环境的建议书
2014/08/26 职场文书
美术教师个人总结
2015/02/06 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书