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,超强推荐expand.js
Dec 23 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
如何手写简易的 Vue Router
Oct 10 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对文件夹递归执行chmod命令的方法
2015/06/19 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
python实现简易内存监控
2018/06/21 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
django 信号调度机制详解
2019/07/19 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
金融事务专业求职信
2014/04/25 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
学校教学工作总结2015
2015/05/19 职场文书