有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。

我们所熟悉的按键有这么集中类型:

  • 单独的按键操作,如: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 监听组合键盘事件的更多相关文章

  1. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

  2. 【转】keyCode对照表及JS监听组合按键

    原文: http://blog.csdn.net/qq_21386275/article/details/67640576 有一些需求,html 页面上的input 框只允许输入数字,  只允许输入小 ...

  3. Python——pyHook监听鼠标键盘事件

    pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...

  4. js监听transition过渡事件

    html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...

  5. WPF之监听组合键事件

    private void KeyDown(object sender, KeyEventArgs e) { if (e.Key== Key.Up && Keyboard.Modifie ...

  6. Flex 自动获取焦点 监听全局键盘事件

    在mxml里监听addedToStage事件 protected function application1_addedToStageHandler(event:Event):void { this. ...

  7. JS监听关闭浏览器事件

    Onunload与Onbeforeunload Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或 ...

  8. js监听浏览器关闭事件

    html : <HTML>  <HEAD>  <title>test</title>  </HEAD>  <body onbefore ...

  9. js监听页面copy事件添加版权信息

    个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...

随机推荐

  1. 3d图像坐标轴及css3属性的讲解

    3d立体坐标轴 如有不知道各种插件的怎么办? 网上查,百度 1.css选择器: 1.id 2.class 3.标签 4.子代 5.后代 6.交集 7.并级 8.通配符 9.结构 10.伪类 11.属性 ...

  2. openstack添加热添加硬盘并识别

    假定在虚拟机当中添加了磁盘,但是虚拟机没有识别出来:如何识别出来 可以使用命令 echo '- - -' >/sys/class/scsi_host/host0/scan 使用后就可以识别出来了 ...

  3. [UE4]在蓝图中判断一个对象是否有效

  4. UE4里的自定义深度功能

    转自:http://www.52vr.com/article-1866-1.html 随着物理渲染系统的发布,虚幻引擎4同时引进了一个新的深度缓存功能,它叫作“自定义深度”,可以用于诸如编辑器里的选择 ...

  5. postgresql数据库常用操作命令及SQL语言

    (1)登录 peng@peng-virtual-machine:~$ sudo -u postgres psql 以用户postgres身份登录,postgres为用户名,可有多个用户,登录时会要求输 ...

  6. Redis-Migrate-Tool 使用详解

    注意:目前不支持4.0.X及以上的redis使用 Redis 集群迁移工具,基于redis复制,快速,稳定. github链接:https://github.com/vipshop/redis-mig ...

  7. Win7删除缓存垃圾文件

    del /s /f /q C:\*.tmp

  8. 第6章 静态路由和动态路由(4)_OSPF动态路由协议

    6. OSPF动态路由协议 6.1 OSPF协议(Open Shortest Path First,OSPF开放式最短路径优先协议) (1)通过路由器之间通告链路的状态来建立链路状态数据库,网络中所有 ...

  9. 第2章 GNS3和PacketTracer网络模拟器(1)_GNS3概述

    1. 安装和配置GNS3 1.1 GNS3概述 (1)GNS3是一款具有图形化界面,可运行在多平台(包括Windows.Linux.Mac OS等)上面的网络虚拟软件. (2)可以在虚拟环境中运行Ci ...

  10. delphi WebBrowser的使用方法详解(六)

    通篇引用mshtml; 一.webbrowser获取滚动条的位置 function GetScrollPositionX(FWB:TEmbeddedWB):Integer;     //水平滚动条位置 ...