jaywcjlove-hotkeys: Простая настройка горячих клавиш в JavaScript без зависимостей. https://jaywcjlove.gitee.io/hotkeys

HotKeys.js — это библиотека для захвата ввода с некоторыми особыми функциями. Она проста в освоении и использовании, имеет разумный размер (~3 КБ) (сжатый: 1,73 КБ), не зависит от других библиотек и не должна конфликтовать с другими библиотеками JavaScript или фреймворками.

Официальный документ: демо-версия (https://jaywcjlove.github.io/hotkeys-js). Больше примеров (https://github.com/jaywcjlove/hotkeys-js/issues?q=label%3ADemo+).

Использование

Вам потребуется установить Node.js на вашей системе.

npm install hotkeys-js --save

Пример использования:

import hotkeys from 'hotkeys-js';

hotkeys('f5', function(event, handler){
  // Prevent the default refresh event under WINDOWS system
  event.preventDefault()
  alert('you pressed F5!')
});

Или вручную загрузите и подключите hotkeys.js в свой HTML. Его также можно загрузить через UNPKG (https://unpkg.com/hotkeys-js/dist/):

CDN: UNPKG (https://unpkg.com/hotkeys-js/dist/), jsdelivr (https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.3/), Githack (https://raw.githack.com/jaywcjlove/hotkeys/master/dist/hotkeys.min.js), Statically (https://cdn.statically.io/gh/jaywcjlove/hotkeys/master/dist/hotkeys.min.js) и bundle.run (https://bundle.run/hotkeys-js@3.7.3).

<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
<script type="text/javascript">
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
  switch (handler.key) {
    case 'ctrl+a': alert('you pressed ctrl+a!');
      break;
    case 'ctrl+b': alert('you pressed ctrl+b!');
      break;
    case 'r': alert('you pressed r!');
      break;
    case 'f': alert('you pressed f!');
      break;
    default: alert(event);
  }
});
</script>

Применение в React

react-hotkeys (https://github.com/jaywcjlove/react-hotkeys) — это компонент React, который прослушивает события клавиатуры keydown и keyup, определяя и отправляя сочетания клавиш. Подробную информацию о методе использования см. в документации react-hotkeys (https://github.com/jaywcjlove/react-hotkeys).

react-hotkeys-hook (https://github.com/JohannesKlauss/react-hotkeys-hook) — хук React для использования сочетаний клавиш в компонентах. Убедитесь, что у вас установлена версия React и React-DOM не ниже 16.8, иначе хуки не будут работать.

Поддержка браузеров

Hotkeys.js протестирован и должен работать в следующих браузерах:

Internet Explorer 6+;
Safari;
Firefox;
Chrome.

Поддерживаемые клавиши

HotKeys понимает следующие модификаторы: ⇧, shift, option, ⌥, alt, ctrl, control, command и ⌘.

Следующие специальные клавиши могут использоваться для сочетаний: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete, f1–f19, num_0–num_9, num_multiply, num_add, num_enter, num_subtract, num_decimal, num_divide. Определение сочетаний клавиш

Существует один глобальный метод, который предоставляет определение сочетаний клавиш при непосредственном вызове.

hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>])

Пример:

hotkeys('f5', function(event, handler) {
  // Предотвратить стандартное событие обновления в системе WINDOWS
  event.preventDefault();
  alert('вы нажали F5!');
});

Вариант

scope<String>
element<HTMLElement>
keyup<Boolean>
keydown<Boolean>
splitKey<string> (по умолчанию это +)
capture<Boolean>

hotkeys('o, enter', {
  scope: 'wcj',
  element: document.getElementById('wrapper'),
}, function(){
  console.log('сделать что-то ещё');
});

hotkeys('ctrl-+', { splitKey: '-' }, function(e) {
  console.log('вы нажали ctrl и +');
});

hotkeys('+', { splitKey: '-' }, function(e){
  console.log('вы нажали +');
})

keyup

События key down и key up выполняют обратные вызовы.

hotkeys('ctrl+a,alt+a+s', {keyup: true}, function(event, handler) {
  if (event.type === 'keydown') {
    console.log('keydown:', event.type, handler, handler.key);
  }

  if (event.type === 'keyup') {
    console.log('keyup:', event.type, handler, handler.key);
  }
});

API REFERENCE

Звёздочка «*»

Суждения о модификаторах клавиш

hotkeys('*', function() {
  if (hotkeys.shift) {
    console.log('нажата клавиша shift!');
  }

  if (hotkeys.ctrl) {
    console.log('нажата клавиша ctrl!');
  }

  if (hotkeys.alt) {
    console.log('нажата клавиша alt!');
  }

  if (hotkeys.option) {
    console.log('нажата клавиша option!');
  }

  if (hotkeys.control) {
    console.log('нажата клавиша control!');
  }

  if (hotkeys.cmd) {
    console.log('нажата клавиша cmd!');
  }

  if (hotkeys.command) {
    console.log('нажата клавиша command!');
  }
});

setScope

Используйте метод hotkeys.setScope, чтобы установить область действия. Может быть только одна активная область, кроме «all». По умолчанию «all» всегда активен.

// Определить сочетания клавиш с областью действия
hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
  console.log('что-то сделать');
});
hotkeys('o, enter', 'files', function(){
  console.log('делать что-то еще');
});

// Установить область (будут учитываться только сочетания клавиш «все» и «проблемы»)
hotkeys.setScope('issues'); // область по умолчанию — «все»

getScope

Используйте метод hotkeys.getScope, чтобы получить область действия.

hotkeys.getScope();

deleteScope

Используйте метод hotkeys.deleteScope, чтобы удалить область действия. Это также удалит все связанные с ней сочетания клавиш.

hotkeys.deleteScope('issues');

Можно использовать второй аргумент, если нужно установить новую область после удаления.

hotkeys.deleteScope('issues', 'newScopeName');

unbind

Подобно определению сочетаний клавиш, их можно отменить с помощью hotkeys.unbind.

// отменить обработчик «а»
hotkeys.unbind('a');

// Отменить сочетания клавиш только для одной области
// Если область не указана, она по умолчанию соответствует текущей области (hotkeys.getScope())
hotkeys.unbind('o, enter', 'issues');
hotkeys.unbind('o, enter', 'files');
``` **Функции**

```js
function example() {
  hotkeys('a', example);
  hotkeys.unbind('a', example);

  hotkeys('a', 'issues', example);
  hotkeys.unbind('a', 'issues', example);
}

Чтобы отменить привязку всех клавиш:

hotkeys.unbind();

isPressed

Например, hotkeys.isPressed(77) вернёт истину, если в данный момент нажата клавиша M.

hotkeys('a', function() {
  console.log(hotkeys.isPressed('a')); //=> истина
  console.log(hotkeys.isPressed('A')); //=> истина
  console.log(hotkeys.isPressed(65)); //=> истина
});

trigger

hotkeys.trigger('ctrl+o');
hotkeys.trigger('ctrl+o', 'scope2');

getPressedKeyCodes

Возвращает массив кодов клавиш, которые в данный момент нажаты.

hotkeys('command+ctrl+shift+a,f', function(){
  console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] или [70]
})

getPressedKeyStrings

Возвращает строку с кодами клавиш, которые в данный момент нажаты.

hotkeys('command+ctrl+shift+a,f', function(){
  console.log(hotkeys.getPressedKeyString()); //=> ['⌘', '⌃', '⇧', 'A', 'F']
})

filter

По умолчанию горячие клавиши не включены для элементов INPUT, SELECT и TEXTAREA. Функция Hotkeys.filter возвращает true, если горячая клавиша работает, и false, если нет.

hotkeys.filter = function(event){
  return true;
}
//Как добавить фильтр к редактируемым меткам. <div contentEditable="true"></div>
//"contentEditable" Старые браузеры, которые не поддерживают drop
hotkeys.filter = function(event) {
  var target = event.target || event.srcElement;
  var tagName = target.tagName;
  return !(target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
}

hotkeys.filter = function(event){
  var tagName = (event.target || event.srcElement).tagName;
  hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
  return true;
}

noConflict

Отказаться от контроля HotKeys над переменной hotkeys.

var k = hotkeys.noConflict();
k('a', function() {
  console.log("do something")
});

hotkeys()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// @ VM2165:816InjectedScript.evaluate @ VM2165:682

Разработка

Для разработки установите зависимости и получите код:

$ git https://github.com/jaywcjlove/hotkeys.git
$ cd hotkeys     # В каталог
$ npm install    # или yarn install

Для разработки запустите сборку с самоперезагрузкой:

$ npm run watch

Запустите веб-сайт документации.

$ npm run doc

Чтобы внести свой вклад, пожалуйста, разветвите Hotkeys.js, добавьте свой патч и тесты для него (в папке test/), а затем отправьте запрос на вытягивание.

$ npm run test
$ npm run test:watch # Модель разработки

Участники

Как всегда, спасибо нашим замечательным участникам!

Сделано с помощью github-action-contributors.

OSCHINA-MIRROR/jaywcjlove-hotkeys

Использование

Применение в React

Поддержка браузеров

Поддерживаемые клавиши

API REFERENCE

setScope

getScope

deleteScope

unbind

isPressed

trigger

getPressedKeyCodes

getPressedKeyStrings

filter

noConflict

Разработка

Участники

Лицензия

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/jaywcjlove-hotkeys .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Использование

Применение в React

Поддержка браузеров

Поддерживаемые клавиши

API REFERENCE

setScope

getScope

deleteScope

unbind

isPressed

trigger

getPressedKeyCodes

getPressedKeyStrings

filter

noConflict

Разработка

Участники

Лицензия

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/jaywcjlove-hotkeys