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不是基础的基础
Dec 24 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
js生成随机数的方法实例
Oct 16 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序实现可长按移动控件
Nov 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 @ at 记号的作用示例介绍
2014/10/10 PHP
php简单实现快速排序的方法
2015/04/04 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python地图绘制实操详解
2019/03/04 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
运动会稿件300字
2014/02/14 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
护士长竞聘书
2014/03/31 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书