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 ...
随机推荐
- C# winfrom 局域网版多人成语接龙(二)
功能基本上是完成了,要两个人完才好玩,目前 倒计时,每组游戏玩家数量这些控制变量,都是写死再代码里的,等以后想改的时候再改,这个项目核心的功能算是实现了,但还可以扩展,比如记录一下用户的游戏数据,答对 ...
- MySQL知识网络
MySQL知识网络 引擎 InnoDB 支持表锁 .行锁 支持事务 *.frm 表结构文件 *.idb 表数据和索引文件 MyISAM 支持表锁 *.frm 表结构文件 *.MYD 表数据文件 *.M ...
- truffle 框架complie错误。
第一次使用trulle框架编译合约发现编译失败,原因是没有在truffle-config.js文件中加入编译器版本. module.exports = { // See <http://truf ...
- linux扩展分区
linux扩展分区 1.准备工作 系统版本:ubuntu20.04 工具:一个安装了ubuntu系统的系统U盘或者ubuntu系统制作的启动盘 2.缩小分区 要扩展某一个分区,再没有空闲空间时需要从其 ...
- OpenCV笔记(9) calcHist绘制直方图
直方图只是简单地将数据归入预定义的组,并在每个组内进行计数.也可以选择对数据提取特征,再对特征进行计数,这里的特征可以是梯度的长度.梯度的方向.颜色或其他任何可以反应数据特点的特征.也就是说,直方图是 ...
- js 设置复选框选中后不勾选
今天在解决bug的时候,明明觉得这是个小问题,但是在我去调试的时候,发现使用setAttribute一直没得效果,虽然input框已经设置了checked属性,但是无法勾选,于是在网上找了一大堆,发现 ...
- Windows10 LTSC版,比Win7还干净
在Windows操作系统的发展历程中,每一个版本都承载着微软对用户需求的深度理解和技术创新.其中,Windows 7以其稳定.高效和简洁的特点,赢得了众多用户的喜爱. 然而,随着技术的不断进步和用户需 ...
- react表单处理 非受控组件
没有和state数据源进行关联的表单项,而是借助ref,使用元素DOM方式获取表单元素值 使用步骤 调用 React.createRef() 方法创建ref对象 将创建好的 ref 对象添加到文本框中 ...
- 对于 EI K 逆序对排列计数的另一种自然求和方法的理解
有一个简单的 \(O(n^3)\) DP,考虑 \(f_{x + 1, k} = \sum_{j = 0}^{x} f_{x, k - j}\),利用前缀和优化即可. 考虑这实际上是 \(f_{x + ...
- es语法 rest api 模拟根据歌手,歌名,歌词来搜索demo
#创建索引songs_v1 PUT { - "acknowledged": true, "shards_acknowledged": true, "i ...