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. Http 代理工具 实战 支持网页与QQ代理

    前言: 有些公司不让员工上Q或封掉某些网站,这时候,干着急没办法,只能鄱墙.如果上网搜代理IP,很少能用,用HTTP-Tunnel Client代理软件,免费的也是经常性的掉线.正好手头上有N台服务器 ...

  2. conda错误 创建新环境conda create -n TF117 python=3.5时报错 An unexpected error has occurred. Conda has prepared the above report.

    创建新环境conda create -n TF117 python=3.5时报错 An unexpected error has occurred. Conda has prepared the ab ...

  3. kubernetes pod升级与回滚扩容与缩容

    运行一个容器: apiVersion: apps/v1 kind: Deployment metadata: annotations: deployment.kubernetes.io/revisio ...

  4. GitHub two-factor authentication开启教程

    问题描述 最近登录GitHub个人页面动不动就有一个提示框"...... two-factor authentication will be required for your accoun ...

  5. 【论文笔记】YOLO系列

    [深度学习]总目录 YOLOv1:<You Only Look Once: Unified, Real-Time Object Detection>one-stage的开山之作,将目标检测 ...

  6. 阿里bxet逆向

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 x82y 分析过 ...

  7. LeetCode 40. Combination Sum II 组合总和 II (C++/Java)

    题目: Given a collection of candidate numbers (candidates) and a target number (target), find all uniq ...

  8. Scrapy框架(六)--图片数据抓取

    基于文件下载的管道类 在scrapy中我们之前爬取的都是基于字符串类型的数据,那么要是基于图片数据的爬取,那又该如何呢? 其实在scrapy中已经为我们封装好了一个专门基于图片请求和持久化存储的管道类 ...

  9. JAVA发送邮件报错: 535 Error: authentication failed, system busy。

    解决方法: 1.设置 -> 微信绑定 -> 开启安全登录 -> 生成新密码 2.使用生成的新密码替换邮箱登录密

  10. 雪花算法(SnowFlake)

    引言 唯一ID可以标识数据的唯一性,在分布式系统中生成唯一ID的方案有很多,常见的方式大概有以下三种: 依赖数据库,使用如MySQL自增列或Oracle序列等. UUID随机数 snowflake雪花 ...