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. HttpClient 发送表单

    基础代码 只包含最简单的代码,不包含乱码解决.文件上传. import org.apache.http.Consts; import org.apache.http.HttpEntity; impor ...

  2. 莫烦tensorflow学习记录 (5)什么是过拟合 (Overfitting)

    什么是过拟合 (Overfitting) 莫烦讲的非常通俗易懂可以看看https://mofanpy.com/tutorials/machine-learning/tensorflow/intro-o ...

  3. nginx通过geo做访问限制

    user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; eve ...

  4. nginx四层负载nginx七层负载,nginx基于nginx-sticky会话保持.

    1. nginx负载均衡实战 nginx提供了 4 7层负载均衡. 可根据业务需求选择不同负载均衡策略. 1.1.1 nginx四层负载均衡[网络层TCP负载] 不支持动静分离,但支持 http my ...

  5. C++笔记(7)成员初始化列表

    成员初始化列表由逗号分隔的初始化列表组成(前面带冒号),它位于参数列调的右括号之后,函数体左括号之前.如果数据成员的名称为mdata,并需要将它初始化为val,则初始化器为mdata(val). Cl ...

  6. 规则引擎easyRules中组合规则的使用

    这两天想要做支付路由,要根据支付信息将支付请求转发到不同的支付渠道,可能要用到规则引擎,于是研究了一下开源的规则引擎产品.规则引擎核心知识与开源产品对比选型 ,这篇文章对规格引擎和开源产品有详细的介绍 ...

  7. THUWC 2024 游记

    其实这个游记也没啥好写的-- day 0 上午做动车两个小时到重庆,路上玩了 1.5h 的星露谷. 下午去巴蜀中学报道试机,系统是 Ubuntu Jammy,大大的好评,只是桌面是 Xubuntu/X ...

  8. 搜狗五笔 date 自定义时间格式

    搜狗五笔 date 自定义时间格式 搜狗五笔 date 默认打出的是"2023-6-15",如果需要"2023-06-15",则需要在自定义短语中设置 属性设置 ...

  9. 2020年你不可不知的自动化框架,可替代Selenuim的测试框架Top10

    Selenium是一种开源自动测试工具.它可以跨不同的浏览器和平台在Web应用程序上执行功能,回归,负载测试.Slenium是最好的工具之一,但确实有一些缺点. 业界有一些强大的工具可以替代Selen ...

  10. php des加密用java解析不了 改个模式 加个IV php密钥/IV要求都是8位

    php des加密用java解析不了 改个模式 加个IV  php密钥/IV要求都是8位 php des加密用java解析不了 Wrong IV length: must be 8 bytes lon ...