js 监听组合键盘事件
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。
我们所熟悉的按键有这么集中类型:
- 单独的按键操作,如:delete、up、down等
- 两位组合建,如:ctrl(cmd)+ 其他按键,alt+其他按键,shift+其他按键
- 三位组合键,如:ctrl(cmd)+ shift + 其他按键,Ctrl(cmd)+ alt + 其他按键
在 事件 触发时 event 中有这几个属性 ctrlKey(metaKey)、altKey、shiftKey, 在按下相应的 ctr 、alt 、shift 时,对应的 属性就会为true ,
然后加上 其他键对应的 keyCode ,就可以判断了
例如 shift + Enter
doc.addEventListener('keydown',function(e){
if(e.keyCode === && e.shiftKey === true){
e.preventDefault(); //阻止默认行为,会有兼容问题
// 其他代码
}
});
js 监听组合键盘事件的更多相关文章
- JS监听组合按键
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...
- 【转】keyCode对照表及JS监听组合按键
原文: http://blog.csdn.net/qq_21386275/article/details/67640576 有一些需求,html 页面上的input 框只允许输入数字, 只允许输入小 ...
- Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
- js监听transition过渡事件
html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...
- WPF之监听组合键事件
private void KeyDown(object sender, KeyEventArgs e) { if (e.Key== Key.Up && Keyboard.Modifie ...
- Flex 自动获取焦点 监听全局键盘事件
在mxml里监听addedToStage事件 protected function application1_addedToStageHandler(event:Event):void { this. ...
- JS监听关闭浏览器事件
Onunload与Onbeforeunload Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或 ...
- js监听浏览器关闭事件
html : <HTML> <HEAD> <title>test</title> </HEAD> <body onbefore ...
- js监听页面copy事件添加版权信息
个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...
随机推荐
- ubuntu 安装php 扩展和查看扩展包
利用ubuntu的软件包下载.安装工具:apt-get 输入下面的命令即可安装 php扩展库mcrypt.curl.gd库.mbstring.simplexml. apt-get install ph ...
- 力奋github:https://github.com/birdstudiocn
我的github地址https://github.com/birdstudiocn
- 史上最全Spring面试71题与答案
1.什么是spring? Spring是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring框架目标是简化Java企业 ...
- 安装spy-debugger查看前端日志
有时需要查看前端页面日志,但是前端同学有时忘记开启vConsole.为了调试方便,最好在本地可以查看前端日志,做到一劳永逸. 1.安装node 网上搜教程 2.安装spy-debugger sudo ...
- jQuery的html和css
jQuery每次返回的都是当前的集合对象: 每个方法用的时候都会把他的元素对象返回,他每次返回的都是最近的那个元素: 1.addclass() 备选元素添加一个类名 2.removeclass() 移 ...
- HDOJ 2019 数列有序!
#include<vector> #include<iostream> #include<algorithm> #include<cstdio> usi ...
- [UE4]虚幻引擎UE4如何制作可拖动(Drag and Drop)的背包(Scrollbox)(转载)
最终效果 由于隐私保护,不想截实际的效果图,下面给出了示意图,左边是背包A,右边是背包B,将其中的子项目从左侧拖往右侧的背包,然后在插入位置放置. 第一步: 制作一个user widget(在内容浏览 ...
- Redis 实现问题
Redis和数据库的同步如何做? 设置redis中数据的过期时间(登录信息) 更新或修改数据库中数据的时候同时更新redis的 数据 使用MQ更新缓存数据 Redis的好处? 速度快:因为数据在内存中 ...
- Mysql 64位解压版的安装
先下载解压版的mysql 下载地址 https://dev.mysql.com/downloads/file/?id=474496 解压 进到里面新建这个文件夹和文件 打开my.ini文件(用文本编辑 ...
- Java - 25 Java 包(package)
Java 包(package) 为了更好地组织类,Java提供了包机制,用于区别类名的命名空间. 包的作用 1 把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2 如同文件夹一样,包 ...