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 ...
随机推荐
- Anagrams(字谜)
描述 Most crossword puzzle(猜字谜) fans are used to anagrams(字谜)--groups of words with the same letters i ...
- Qt QMainWindow的使用
参考视频:黑马科技:https://www.bilibili.com/video/BV1XW411x7NU?p=19 QMainWindow是一个为用户提供主窗口程序的类,包含一个菜单栏(menu b ...
- 地址栏hash模式以?问号分割也可以分割的
可以看到href里面hash没有? 但是还是以?分割了 就很不明白 但是我就indexof判断有没有? 再进行下一步逻辑 这里记录一下坑
- git基础命令 gitHub
git 和 gitHub git : 本地项目版本管理工具 gitHub : 相当于一个有很多功能的百度云盘,存储本地项目版本,管 ...
- Java JVM——10.对象实例化内存布局与访问定位
对象实例化 对象创建方式 ★ new:最常见的方式.单例类中调用getInstance的静态类方法,XXXFactory的静态方法. ★ Class的newInstance方法:在JDK9里面被标记为 ...
- Python + redis操作Redis数据库
Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...
- 重学前端 - react-第二节: 添加ts + scss
重学前端 - react: 添加ts + scss 简介: 上一节我们新建了 react 项目.项目中并没有使用 ts + scss. 现在我们为项目添加 ts + scss.是项目后期维护更加方便, ...
- WebApi 接口参数不再困惑
从网上看了WEBAPI理解感觉不错分享一下 前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法 ...
- bugly进阶01-集成bugly时的相关参数
bugly进阶01-集成bugly时的相关参数 个人github CSDN博客 前言 bugly的集成十分的简单,在代码中只需要简单的一个语句就可以轻松集成: - (BOOL)application: ...
- 06-Linux用户和组管理
关于用户和组的知识 家目录 用户都有家目录:root用户家目录为/root.其他用户的家目录在/home/,如user1的家目录为/home/user1 当我们创建用户时,系统就会自动创建该用户的家目 ...