Mousetrap is a simple library for handling keyboard shortcuts in Javascript.

It is around 2kb minified and gzipped and 4.5kb minified, has no external dependencies, and has been tested in the following browsers:

  • Internet Explorer 6+
  • Safari
  • Firefox
  • Chrome

It has support for keypress, keydown, and keyup events on specific keys, keyboard combinations, or key sequences.

Getting started

Include mousetrap on your page before the closing </body> tag

<script src="/path/to/mousetrap.min.js"></script>

Add some keyboard events to listen for

<script>
// single keys
Mousetrap.bind('4', function() { console.log('4'); });
Mousetrap.bind("?", function() { console.log('show shortcuts!'); });
Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup'); // combinations
Mousetrap.bind('command+shift+k', function() { console.log('command shift k'); }); // map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
console.log('command k or control k'); // return false to prevent default browser behavior
// and stop event from bubbling
return false;
}); // gmail style sequences
Mousetrap.bind('g i', function() { console.log('go to inbox'); });
Mousetrap.bind('* a', function() { console.log('select all'); }); // konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
console.log('konami code');
});
</script>

Others

More: https://craig.is/killing/mice

Download: mousetrap-1.5.3.zip

Mousetrap - Keyboard shortcuts in Javascript的更多相关文章

  1. OS X: Keyboard shortcuts

    Using keyboard shortcuts To use a keyboard shortcut, press a modifier key at the same time as a char ...

  2. [No0000113]Keyboard shortcuts for Windows Visual Studio Code

    General 常用Ctrl+Shift+P, F1 Show Command Palette 显示命令行Ctrl+P Quick Open, Go to File… 快速打开Ctrl+Shift+N ...

  3. keyboard shortcuts & Xcode 10

    keyboard shortcuts & Xcode 10 Xcode Keyboard Shortcuts https://swifteducation.github.io/assets/p ...

  4. MBP 2018 & Mac keyboard shortcuts

    MBP 2018 & Mac keyboard shortcuts https://support.apple.com/en-us/HT201236 delete key === Contro ...

  5. [转]UiPath Keyboard Shortcuts

    本文转自:https://docs.uipath.com/studio/docs/keyboard-shortcuts The complete list of keyboard shortcuts ...

  6. Google Chrome Keyboard Shortcuts

    Navigation To do this Press this Open a new window Ctrl + N Open a new tab Ctrl + T Open a new windo ...

  7. [转]33 useful Keyboard Shortcuts for Run commond

    原文: http://www.shortcutworld.com/en/win/Run-command.html 1. Calling Run CommandWin + r               ...

  8. SQL Server Management Studio Keyboard shortcuts

    一些平时在SQL Server Management Studio 使用到的快捷键 F5 (Ctrl+x)执行选中部分的语句,没有选中则全文执行 Ctrl+L 现实执行计划(估计) Ctrl+M 在运 ...

  9. RStudio Keyboard Shortcuts

    Console Description Windows & Linux Mac Move cursor to Console Ctrl+2 Ctrl+2 Clear console Ctrl+ ...

随机推荐

  1. IAR Build from the command line 环境变量设置

    http://supp.iar.com/Support/?Note=47884 Technical Note 47884 Build from the command line The alterna ...

  2. myeclipse、eclipse中项目复制后(可能无法访问)注意事项 .

    .myEclipse 复制后修改名称,访问不到项目 这是因为,你只是改了项目的名称,而没有改 下面是解决方法: 方法 1.右击你的项目,选择“properties”,在“type filter tex ...

  3. C#读写者线程(用AutoResetEvent实现同步)

    转载自 http://blog.csdn.net/livelylittlefish/article/details/2735440 本博客(http://blog.csdn.net/livelylit ...

  4. wp———图片切换效果

    此篇文章主要是记录一下使用XamlReader加载动画时遇到的一些问题. 首先呢,把源码附上 <phone:PhoneApplicationPage x:Class="PicChang ...

  5. Html5游戏开发开始前的一些数学基础

    计算一个向量的值 var vectorMagnitude = Math.sqrt(Math.pow(vector.x, 2) + Math.pow(vector.y, 2)); 单位向量 var ve ...

  6. CodeForces 164 B. Ancient Berland Hieroglyphs 单调队列

    B. Ancient Berland Hieroglyphs 题目连接: http://codeforces.com/problemset/problem/164/B Descriptionww.co ...

  7. hdu 5268 ZYB loves Score 水题

    ZYB loves Score Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  8. Oracle DB 使用调度程序自动执行任务

    • 使用调度程序来简化管理任务 • 创建作业.程序和调度 • 监视作业执行 • 使用基于时间或基于事件的调度来执行调度程序作业 • 描述窗口.窗口组.作业类和使用者组的用途 • 使用电子邮件通知 • ...

  9. WCF入门教程(二)从零做起

    通过最基本的操作看到最简单的WCF如何实现的.这是VS的SDK默认创建的样本 1.创建WCF服务库 2.看其生成结构 1)IService1.cs(协议) 定义了协议,具体什么操作,操作的参数和返回值 ...

  10. 你真的了解javascript吗

    原文地址:http://dmitry.baranovskiy.com/post/91403200 看了文章中五个小例子,写了写自己的理解 #demo1 if (!("a" in w ...