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

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

  • 单独的按键操作,如: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. (转载)通向架构师的道路(第四天)之Tomcat性能调优-让小猫飞奔

    转载自:https://blog.csdn.net/lifetragedy/article/details/7708724 参考文章:tomcat以及常用web容器线程池的实现原理https://bl ...

  2. Python——ipython(python programming)

    Tab自动补充 Ctrl+c中断程序 ?帮助调出文档   _得到上次的结果 ,__的到上上次结果,___得到上上次结果  %开头的为魔术命令  %timeit 得到运算时间,多次求平均  %%time ...

  3. Ajax传参讲解

    客户端和服务器 1.请求:request 2.响应:response 服务器响应事件:onreadystatechange() send() 用于向后台传递参数: Ajax的请求方式 get:    ...

  4. android判断adb调试是否打开及代码跳转到开发者选项界面

    boolean enableAdb = (Settings.Secure.getInt(getContentResolver(), Settings.Secure.ADB_ENABLED, 0) &g ...

  5. 使用LiteOrm删除数据对象失败的坑

    使用 LiteOrm.newSingleInstance(BaseApplication.getInstance(), Constant.DB_NAME); 在不同进程中创建了两次对象,在保存和删除的 ...

  6. Android中Handler.removeCallbacksAndMessages(null)的作用

    众所周知,在Android开发中会大量使用到Handler.但是,由于与activity生命周期不一致,当一个Activity被销毁时,如果Handler对象有Message在排队,则无法释放,进而导 ...

  7. MySQL 之 MySQL数据库的优化

    服务器物理硬件的优化 在挑选硬件服务器时,我们应该从下面几个方面着重对MySQL服务器的硬件配置进行优化,也就是说将项目中的资金着重投入到如下几处: 1.磁盘寻道能力(磁盘I/O),我们现在用的都是S ...

  8. 第7章 网络层协议(4)_IGMP协议

    4. IGMP协议(Internet Group Management Protocol) 4.1 什么是组播(多播) (1)单播同一个视频要发送90个副本,但支持收看者“快进”和“倒退”. (2)组 ...

  9. MySQL客户端管理

    mysql -P3306 -h localhost -u root -p 分别是:端口  服务器 用户名 有密码(这里可以先不用输入,带这个参数表示有密码,密码在打开客户端后输入,也可以在这里直接输入 ...

  10. php引用变量

    引用变量:在php中引用意味着用不同的名字访问同一个变量内容 定义方式:& 总结:$b=&$a其中$b是取到了$a的地址,随着$a的地址变化,不会重新开辟空间可以根据他们的内存占用情况 ...