JavaScript监听组合按键

 

by:授客 QQ1033553122

1.   思路

  1. 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现,
  1. 当按下的组合键包含Ctrl键时,ctrlKey键会显示为true;
  1. 当按下的组合键包含Shift键、或者按键之前开启大写时,shiftkey键会显示为true;
  1. 当按下的组合键包含Alt键时,altKey键会显示为true;
  1. 当按下的组合键包含meta键(Mac电脑上 【⌘】、command键,非mac电脑为 win
  2.  
  3. 时,metaKey键会显示为true
  1.  
  1. 另外,按下键时,可通过event获取对应键的ascii码,结合这些信息就可以对按键进行判断了
  1.  

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键");

}

}

 

  1.  

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. C# winfrom 局域网版多人成语接龙(二)

    功能基本上是完成了,要两个人完才好玩,目前 倒计时,每组游戏玩家数量这些控制变量,都是写死再代码里的,等以后想改的时候再改,这个项目核心的功能算是实现了,但还可以扩展,比如记录一下用户的游戏数据,答对 ...

  2. MySQL知识网络

    MySQL知识网络 引擎 InnoDB 支持表锁 .行锁 支持事务 *.frm 表结构文件 *.idb 表数据和索引文件 MyISAM 支持表锁 *.frm 表结构文件 *.MYD 表数据文件 *.M ...

  3. truffle 框架complie错误。

    第一次使用trulle框架编译合约发现编译失败,原因是没有在truffle-config.js文件中加入编译器版本. module.exports = { // See <http://truf ...

  4. linux扩展分区

    linux扩展分区 1.准备工作 系统版本:ubuntu20.04 工具:一个安装了ubuntu系统的系统U盘或者ubuntu系统制作的启动盘 2.缩小分区 要扩展某一个分区,再没有空闲空间时需要从其 ...

  5. OpenCV笔记(9) calcHist绘制直方图

    直方图只是简单地将数据归入预定义的组,并在每个组内进行计数.也可以选择对数据提取特征,再对特征进行计数,这里的特征可以是梯度的长度.梯度的方向.颜色或其他任何可以反应数据特点的特征.也就是说,直方图是 ...

  6. js 设置复选框选中后不勾选

    今天在解决bug的时候,明明觉得这是个小问题,但是在我去调试的时候,发现使用setAttribute一直没得效果,虽然input框已经设置了checked属性,但是无法勾选,于是在网上找了一大堆,发现 ...

  7. Windows10 LTSC版,比Win7还干净

    在Windows操作系统的发展历程中,每一个版本都承载着微软对用户需求的深度理解和技术创新.其中,Windows 7以其稳定.高效和简洁的特点,赢得了众多用户的喜爱. 然而,随着技术的不断进步和用户需 ...

  8. react表单处理 非受控组件

    没有和state数据源进行关联的表单项,而是借助ref,使用元素DOM方式获取表单元素值 使用步骤 调用 React.createRef() 方法创建ref对象 将创建好的 ref 对象添加到文本框中 ...

  9. 对于 EI K 逆序对排列计数的另一种自然求和方法的理解

    有一个简单的 \(O(n^3)\) DP,考虑 \(f_{x + 1, k} = \sum_{j = 0}^{x} f_{x, k - j}\),利用前缀和优化即可. 考虑这实际上是 \(f_{x + ...

  10. es语法 rest api 模拟根据歌手,歌名,歌词来搜索demo

    #创建索引songs_v1 PUT { - "acknowledged": true, "shards_acknowledged": true, "i ...