Правильный способ добавить сочетания клавиш в Javascript с помощью мышеловки

Содержание

1 1. Скачайте и установите Mousetrap
2 2. Добавление ярлыков

Человек, который не любит тратить время, нажимая и выделяя все мышью, обычно привыкли использовать сочетания клавиш для повышения своей активности. Если ваше приложение широко используется таким человеком, вы, возможно, уже рассматривали возможность создания ярлыков с помощью JavaScript, и если вы ищете этот учебник, вы, возможно, столкнулись с трудностями в связи с событиями нажатия клавиш на JavaScript:

document.onkeypress = function(e){
displayunicode(e);
};
function displayunicode(e){
var unicode = e.keyCode? e.keyCode : e.charCode;
console.log(unicode);
}

На первый взгляд, это не выглядит плохо. Однако, если вы хотите выполнить какое-либо действие при нажатии определенной клавиши, вам нужно знать ее код, кроме того, если вы хотите обрабатывать комбинации, у вас будет больше кода (включая jQuery):

$(document).keydown(function(e){
if( e.which === 89 && e.ctrlKey ){
alert('control + y');
}else if( e.which === 90 && e.ctrlKey ){
alert('control + z');
}
});

Вот почему мы рекомендуем вам, если вы работаете с комбинациями клавиш, используйте MouseTrap и в конечном итоге терпите страдания. Он сокращен до 2 Кбайт, сжат в формате GZIP и 4,5 Кбайт, не имеет внешних зависимостей и был протестирован в следующих браузерах:

Internet Explorer 6+
Сафари
Fire Fox
Хром

Я упоминал, что он работает на IE 6+? Нету ? Ну, скажу еще раз, он работает на IE 6+. Он поддерживает события нажатия клавиш, нажатия клавиш и нажатия клавиш для определенных клавиш, комбинаций клавиш или последовательностей клавиш. В отличие от других библиотек, мышеловка не имеет никакой внешней зависимости, а имеет только кодовую базу.

1. Скачайте и установите Mousetrap

Источник MouseTrap доступен на Github. Если вы используете менеджеры пакетов, вы можете установить их через NPM:

npm install mousetrap

Тогда вы сможете потребовать это с помощью var Mousetrap = require('mousetrap');, В качестве альтернативы вы можете скачать распространяемая минимизированная версия здесь или исходный код а затем включите его в свой документ с помощью тега script:

После ссылки вы сможете получить доступ к библиотеке в документе с помощью глобальной переменной. Mousetrap,

2. Добавление ярлыков

Чтобы добавить сочетания клавиш в ваш документ, Mousetrap имеет полезный метод bind. Этот метод ожидает в качестве первого аргумента либо строку, либо массив с некоторыми буквенными комбинациями клавиш. Вот так ! Вам не нужно точно знать коды каждой клавиши на клавиатуре, чтобы добавить пару ярлыков в ваше приложение.

Одиночные ключи

Как упоминалось ранее, вы можете добавить ярлык для одного ключа, указав его значение в первой строке аргумента bind:

Mousetrap.bind('4', function() {
console.log('4');
});
Mousetrap.bind("?", function() {
console.log('show shortcuts!');
});

Изменить триггер ключевого события

По умолчанию действие Mousetrap запускается, когда клавиша нажата (и при непрерывном нажатии нажата). Если вы хотите изменить это поведение и вызвать его обратный вызов только один раз, когда ключ активен, вы можете указать его с помощью третьего аргумента bind:

Mousetrap.bind('esc', function() {
console.log("You pressed escape, don't you try to run !");
// On keyup
}, 'keyup');

Специальные клавиши для комбинаций

С помощью Mousetrap вы можете указать, когда нажимается специальная клавиша (CTRL в Windows, Command на Mac или клавиша Alt), и создать комбинацию:

Mousetrap.bind('alt+a', function() {
alert("You pressed ALT+A !");
});
Mousetrap.bind('command+shift+k', function() {
console.log('command shift k !');
});
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
console.log('command || ctrl k !');
});