mousetrap README

The project's README from github.com/ccampbell/mousetrap. As one markdown file: README.md.

Mousetrap

CDNJS

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

It is licensed under the Apache 2.0 license.

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

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

Getting started

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

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

    or install mousetrap from npm and require it

    var Mousetrap = require('mousetrap');
    
  2. 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>
    

Why Mousetrap?

There are a number of other similar libraries out there so what makes this one different?

Tests

Unit tests are run with mocha.

Running in browser

View it online to check your browser compatibility. You may also download the repo and open tests/mousetrap.html in your browser.

Running with Node.js

  1. Install development dependencies

    cd /path/to/repo
    npm install
    
  2. Run tests

    npm test
    

Documentation

Full documentation can be found at https://craig.is/killing/mice

mousetrap (ccampbell/mousetrap)

Searching Database…

11.8K ·GitHub
这是什么?Mousetrap 是一个简单的 JavaScript 库,用于在浏览器中处理键盘快捷键。
这是框架还是一个小型独立库?它是一个体积很小的独立库,没有外部依赖,也不需要任何框架。
我该如何把它添加到我的页面或项目中?在 body 结束标签之前通过 script 标签引入 mousetrap,或从 npm 安装后用 require 引入,然后绑定按键事件。
使用它还需要其他库或框架吗?不需要,Mousetrap 没有任何外部依赖,可以独立运行。
它实际支持哪些浏览器?已在 Internet Explorer 6+、Safari、Firefox 和 Chrome 中测试过。
它只能在浏览器里运行,还是也能在 Node 中运行?实际处理快捷键时它在浏览器中运行,但其测试套件也可以用 Node.js 运行。
这个库有多大?Mousetrap 压缩并 gzip 后约 2kb,仅压缩未使用 gzip 时约 4.5kb。
我可以创建哪些类型的按键绑定?它支持单个按键上的 keypress、keydown 和 keyup 事件,支持 ctrl+shift+k 这类组合键,支持 Gmail 风格的按键序列,还可以通过 trigger() 以编程方式触发。
为什么要用 Mousetrap,而不是其他快捷键库?它没有依赖项,支持国际键盘布局和数字小键盘,无需指定 shift 组合即可直接绑定特殊字符,并且可以为每个绑定单独选择 keypress/keydown/keyup。
测试是怎么运行的?单元测试通过 mocha 运行(npm test 会执行 'mocha --reporter=nyan tests/test.mousetrap.js'),也可以直接在浏览器中打开 tests/mousetrap.html 来检查兼容性。
Creator
ccampbell
Size
0.5 MB
Stars
11.8K
Age
14y
Commits · 90 Days