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. statefulset有状态应用管理

    statefulset介绍 StatefulSet(有状态集,缩写为sts)常用于部署有状态的且需要有序启动的应用程序,比如在进行SpringCloud项目容器化时,Eureka的部署是比较适合用St ...

  2. 在 Flask 项目中配置 Session:简明指南

    在 Flask 项目中配置 Session:简明指南 本文介绍如何在 Flask 项目中配置会话 1. Flask 内置会话 Flask 自带会话管理功能,使用客户端 Cookie 存储会话数据.默认 ...

  3. uniapp 组件使用

    组件使用情况:页面出现多个相似的页面这个时候我们就可以把公共的页面进行封装,避免冗余的代码 1. compoents 目录下新建组件,名称随意[案例就叫 newsList]2. 开始封装需要多次使用的 ...

  4. JavaSE 标签 break continue

    *标签.break.continue 当需要结束多个循环后,则使用标签 label:for(int i=0;i<3;i++){ for(int j=0;j<3;j++){ if(j==2) ...

  5. java.sql.SQLException: MONTH 报错解决方法

    idea控制台报错:java.sql.SQLException: MONTH Error attempting to get column 'xxx' from result set. Cause: ...

  6. vue组件 定义全局组件

    组件 (Component) 是 Vue.js 最强大的功能之一,它是html.css.js等的一个聚合体. 组件化 将一个具备完整功能的项目的一部分分割多处使用 加快项目的进度 可以进行项目的复用 ...

  7. 【 INFINI Workshop 上海站】7 月 27 日一起动手实验玩转 Easysearch

    [ INFINI Workshop 上海站]7 月 27 日下午 和 INFINI Labs 的技术专家面对面,第一时间了解极限实验室的发布最新产品和功能特性,通过动手实战,快速掌握最前沿的搜索技术, ...

  8. ubuntu server 安装慢 安装卡

    无论是桌面版本ubuntu,还是server 版本,都喜欢在安装过程中联网下东西: 默认的软件包镜像地址下载非常慢,你自身的网络再差点,可能会安装好几个小时. 解决方案: 方案1: 安装前拔网线. 方 ...

  9. 《Android开发卷——实时监听文本框输入》

       在实际开发中,有时候会让用户发布一些类似微博.说说的东西,但是这个是有限制长度的,除了在文本输入框限制长度外,还要在旁边有一条提示还能输入多少个字的"友好提示". 1.文本框 ...

  10. 前端使用 Konva 实现可视化设计器(15)- 自定义连接点、连接优化

    前面,本示例实现了折线连接线,简述了实现的思路和原理,也已知了一些缺陷.本章将处理一些缺陷的同时,实现支持连接点的自定义,一个节点可以定义多个连接点,最终可以满足类似图元接线的效果. 请大家动动小手, ...