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-библиотека для обработки горячих клавиш в браузере.
Это фреймворк или небольшая самостоятельная библиотека?Это крошечная самостоятельная библиотека без внешних зависимостей, фреймворк для работы не нужен.
Как мне добавить её на страницу или в проект?Подключите mousetrap через тег script перед закрывающим тегом body или установите из npm и подключите через require, а затем привяжите обработчики событий клавиш.
Нужна ли мне другая библиотека или фреймворк для её использования?Нет, у Mousetrap нет внешних зависимостей, она работает самостоятельно.
Какие браузеры она действительно поддерживает?Её тестировали в Internet Explorer 6+, Safari, Firefox и Chrome.
Где это работает — только в браузере или также в Node?Обработка горячих клавиш работает в браузере, а набор тестов можно запустить и через Node.js.
Насколько большая эта библиотека?Mousetrap занимает около 2 КБ после минификации и сжатия gzip или 4,5 КБ после минификации без gzip.
Какие типы привязок клавиш можно создавать?Поддерживаются события 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