JavaScript监听组合按键

 

by:授客 QQ1033553122

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

}

}

 

 

JavaScript 监听组合按键的更多相关文章

  1. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

  2. Dom监听组合按键

    JS监听组合按键   有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键 ...

  3. 【转】keyCode对照表及JS监听组合按键

    原文: http://blog.csdn.net/qq_21386275/article/details/67640576 有一些需求,html 页面上的input 框只允许输入数字,  只允许输入小 ...

  4. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  5. 92. extjs specialkey监听回车按键

    转自:http://blog.sina.com.cn/s/blog_647a022e0101401n.html 1 监听表单字段事件: Ext使得对用户某个动作的监听特别简单,诸如单击某个元素或者按下 ...

  6. android监听虚拟按键的显示与隐藏【转】

    本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...

  7. Android通过Intent.ACTION_CLOSE_SYSTEM_DIALOGS监听Home按键消息

    Android对屏幕下方经常使用的四个按键消息处理是不一致的: 1.搜索按键的消息在onKeyDown或者onKeyUp中接收: 2.菜单按键的消息在onCreateOptionsMenu.onKey ...

  8. javascript监听手机返回键

    javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...

  9. JavaScript监听回车事件

    记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...

  10. JavaScript监听页面可见性(焦点)同时改变title的三种方法

    JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...

随机推荐

  1. 如何启动?win11下的Linux子系统【4种方法】

    实验室的开发环境在Linux操作系统下,时不时就需要打开Linux环境去操作,而且需要本地编译或者远程SSH.这时候window和Linux切换很不方便.本科的做法就是window+虚拟机的Linux ...

  2. Immich让你从此告别百度网盘备份手机照片

    一. Immich 是什么 Immich是一个开源的图片自托管服务,它能实现类似于百度网盘的照片自动备份.分类等功能,它同时提供了Web管理页面,和移动端APP,可以轻松备份手机中的照片至家庭服务器中 ...

  3. 深入解析HashMap源码

    HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Developmet Kit)版本的更新,JDK1.8对HashMap底层的实现进行了优化,例如引入 ...

  4. golang kmp算法实现

    // 不多逼逼直接上代码.原理的话可以参考下面的链接.讲的非常清晰package main import "fmt" func genNext(s string) []int { ...

  5. 文件系统(五):exFAT 文件系统原理详解

    前言 exFAT是微软2006年推出的一种文件系统,距今已快二十年,相比于FAT16和FAT32,exFAT还是算年轻.exFAT一直是微软的一个专用文件系统,直到2019年微软发布它的规范,目前微软 ...

  6. golang import 导入的四种方式

    1 标准导入: import "package_name" 2 导入别名: import ( alias "package_name" ) 3 匿名导入: _ ...

  7. 记录nodejs做编辑和新增时候对数据库的操作

    server.js文件 const dao = require("../dao/user.dao"); saveDat是个对象自己处理一下 if (updataFlag) {//编 ...

  8. CentOS 7 Graylog 安装和卸载

    CentOS 7 安装 Graylog #主体思路1.安装JDK8.2.安装mongodb.3.安装Elasticsearch,并修改elasticsearch.yml 文件 .4.安装Graylog ...

  9. 项目管理--PMBOK 读书笔记(8)【项目质量管理】

    1.数据表现-流程图: 流程图也称为过程图,用来显示在一个或者多个输入转化为一个或者多个输入出的过程. 2.质量工具图比较: 发现问题:控制图(七点规则等).趋势图 寻找原因:因果图.流程图 分析原因 ...

  10. Springboot - log4j2

    log4j2 springboot中默认的日志框架是logback,如果要使用log4j2,需要先去除默认的日志框架 <!-- 去除系统默认的logback日志框架,使用自己配置的框架 --&g ...