JS监听组合按键

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键");

}

}

本文来自PHP中文网,原文地址:https://www.php.cn/js-tutorial-456592.html 推荐视频教程:《js基础教程

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 页面中有用到监听组合键(例:Ctrl + R)的事件,特地去查了下js的event对象,在这里记录一下 先用代码打...
    mills_han阅读 7,891评论 1 2
  • 事件是什么,可以用来做什么,什么时候用到它? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScr...
    茂茂爱吃鱼阅读 1,537评论 0 16
  • 键盘事件的类型相对应的操作 操作keyCode 不同于 操作charCode this代表的上下文 事件动作得到事...
    南航阅读 606评论 0 0
  • 背景 项目中需要对网页的 UI 操作设置快捷键,但是我们的开发机是 Mac,用户使用的是 Windows。所以开发...
    唯泥Bernie阅读 3,968评论 0 0
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,530评论 1 11