JavaScript监听组合按键

简介: JavaScript监听组合按键

JavaScript监听组合按键



 

1.   思路

 

 

 

如图,通过监听并打印键盘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键");

           }

       }

 

目录
相关文章
|
16天前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
3月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
157 0
|
2月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
47 4
|
3月前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
229 2
|
4月前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
3月前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
3月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
306 0
|
4月前
|
JavaScript
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
230 0
|
5月前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
129 3
|
4月前
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
204 0