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. Vue cli之在组件中使用axios

    默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装. 在项目根目录中使用 npm安装包: npm install axios 接着在main.js文件中,导入axios并把axi ...

  2. HTML——input之密码框

    在 HTML 中,把 <input> 标签的 type 属性设置为 password 可以表示密码框.具体语法格式如下: <input type="password&quo ...

  3. Django——form组件的全局钩子

    前面提到过的都是针对单个字段的校验,如果想同时对多个字段进行校验,就可以使用全局钩子(编写全局钩子预留的clean方法,可以获取到多个字段并进行校验) 注意: ---- 默认的校验.自定义正则规则的校 ...

  4. Android 13 - Media框架 - 异步消息机制

    关注公众号免费阅读全文,进入音视频开发技术分享群! b7693967-317e-4c46-96d3-d40d9d87e382 由于网上已经有许多优秀的博文讲解了Android的异步消息机制(ALoop ...

  5. 批量处理图片(resize;grayscale)以及重命名

    批量处理图片(resize:grayscale)以及重命名 做深度学习,有大量图片需要做为训练集,为方便批量resize,rename,灰度化,制作python脚本. 先纪录一些函数: resize ...

  6. RabbbitMQ RabbitListener使用IP动态队列 Attribute value must be constant

    在RabbitMQ消息队列使用 @RabbitListener 接收消息,队列名称使用常量命名,但是如果使用动态队列名称,比如根据系统 ip 命名队列名称. 获取服务器 IP /** * 获取服务器i ...

  7. LeetCode 347. Top K Frequent Elements 前 K 个高频元素 (Java)

    题目: Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums ...

  8. CF364E

    problem 算法1 我会暴力!!! 直接枚举右上角和左下角,然后计算答案,使用前缀和优化后时间复杂度为 \(O(n^4)\). 算法2 我会分治!!!. 我们知道答案就是左边+右边+两边都有的个数 ...

  9. NET8中增加的简单适用的DI扩展库Microsoft.Extensions.DependencyInjection.AutoActivation

    这个库提供了在启动期间实例化已注册的单例,而不是在首次使用它时实例化. 单例通常在首次使用时创建,这可能会导致响应传入请求的延迟高于平时.在注册时创建实例有助于防止第一次Request请求的SLA 以 ...

  10. 《Android开发卷——自定义日期选择器(三)》

                 继 <Android开发卷--自定义日期选择器(一)>:http://blog.csdn.net/chillax_li/article/details/19047 ...