JavaScript 监听组合按键
JavaScript监听组合按键
by:授客 QQ:1033553122
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 监听组合按键的更多相关文章
- JS监听组合按键
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...
- Dom监听组合按键
JS监听组合按键 有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键 ...
- 【转】keyCode对照表及JS监听组合按键
原文: http://blog.csdn.net/qq_21386275/article/details/67640576 有一些需求,html 页面上的input 框只允许输入数字, 只允许输入小 ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- 92. extjs specialkey监听回车按键
转自:http://blog.sina.com.cn/s/blog_647a022e0101401n.html 1 监听表单字段事件: Ext使得对用户某个动作的监听特别简单,诸如单击某个元素或者按下 ...
- android监听虚拟按键的显示与隐藏【转】
本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...
- Android通过Intent.ACTION_CLOSE_SYSTEM_DIALOGS监听Home按键消息
Android对屏幕下方经常使用的四个按键消息处理是不一致的: 1.搜索按键的消息在onKeyDown或者onKeyUp中接收: 2.菜单按键的消息在onCreateOptionsMenu.onKey ...
- javascript监听手机返回键
javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...
- JavaScript监听回车事件
记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...
- JavaScript监听页面可见性(焦点)同时改变title的三种方法
JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...
随机推荐
- 基于 GoLang 编写的 IOT 物联网在线直播抓娃娃企业级项目
基于 GoLang 编写的 IOT 物联网在线直播抓娃娃企业级项目 引言 前几年,娱乐物联网的热度很高.我当时所在的公司启动了一个将线下娃娃机的玩法,迁移到线上的项目,因此公司决定开发一个在线直播抓娃 ...
- 《最新出炉》系列入门篇-Python+Playwright自动化测试-50-滚动条操作
1.简介 有些页面的内容不是打开页面时直接加载的,需要我们滚动页面,直到页面的位置显示在屏幕上时,才会去请求服务器,加载相关的内容,这就是我们常说的懒加载.还有就是在日常工作和学习中,经常会遇到我们的 ...
- 滴滴面试:谈谈你对Netty线程模型的理解?
Netty 线程模型是指 Netty 框架为了提供高性能.高并发的网络通信,而设计的管理和利用线程的策略和机制. Netty 线程模型被称为 Reactor(响应式)模型/模式,它是基于 NIO 多路 ...
- 国产大语言模型ChatGLM3本地搭建、使用和功能扩展
1.官网 ChatGLM3 2.下载ChatGLM3源码 直接在https://github.com/THUDM/ChatGLM3,下载源码 3.下载模型 如果显卡8G一下建议下载ChatGLM3-6 ...
- Win11 LTSC 中文版来了,丝般顺滑,极速响应
最近网络上出现了泄露的Win11的LTSC版本,版本号为Build 26100.1,据息,该泄露版是微软提供给OEM厂商测试用的,是今年下半年的Windows 11 LTSC RTM版的正式版本,却被 ...
- 剑指Offer-52.正则表达式匹配(C++/Java)
题目: 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式. ...
- Linux Topicons Plus桌面工具安装
Topicons Plus是Linux系统GNOME桌面环境的工具,方便于在工具栏显示应用小图标. 1.进入GNOME商店搜搜下载TopIcons Plus工具.下载路径:https://extens ...
- 微信实名认证申请单报错:请求中含有未在API文档中定义的参数
完整错误: {"code":"PARAM_ERROR","detail":{"location":null," ...
- AgileConfig-1.9.4 发布,支持 OpenTelemetry
Hello 大家好,最新版的 AgileConfig 1.9.4 发布了.现在它可以通过 OpenTelemetry 对外提供 logs,traces,metrics 三个维度的数据.用户可以自由选择 ...
- C# DateTime日期字段转中文文字
public static String ToChineseYearAndMonth(this DateTime dt) { string[] chineseNumbers = { "零&q ...