2

Например ctrl + Z + F7

В определенном компоненте, нужно отловить факт нажатия такой комбинации.

2 ответа 2

4

Как-то так. Написал на коленке. Не думаю, что это лучше вариантов, которые могут предложить библиотеки, но это поможет понять, как работает отлов комбинации под капотом )) Строки с комментарием //мусор можно удалить.

let catchCombination = (() => {
  let combination = [];
  window.addEventListener("keyup", () => {
    combination = [];
    document.getElementById("clicked").innerHTML = ""; //мусор
  });
  return (e, userCombination) => {
    combination.push(e.code);
    document.getElementById("clicked").innerHTML += "Зажаты " + combination.join("+") + "<br>"; //мусор
    if (combination.join("+").toLowerCase() === userCombination.toLowerCase()) {
      document.body.innerHTML += "<span style='color:green'>Комбинация поймана!<span><br>";  //тут должен быть твой код
    }
  }
})();


window.addEventListener("keydown", e => catchCombination(e, "ControlLeft+KeyZ+f7"));
Нажми в это окно, а потом зажми control + z +f7!<br>
<div id="clicked"></div>

2
  • Получается в reactjs ничего встроенного нет и хорошая практика пользоваться window.addEventListener keydown и keyup?
    – manking
    23 янв 2019 в 7:46
  • @manking если вы хотите отлавливать нажатия где бы ни находился фокус, то это хороший вариант. Задача реакта - рисовать интерфейс, ничего встроенного в него не припоминаю. 23 янв 2019 в 8:23
1

В объекте события обработчика onkeyup(e) есть свойстве e.ctrlKey, e.metaKey, e.shiftKey. Т.е. легко отследить комбинацию двух клавиш, одна из которых ctrl, alt, shift. Не могу представить вариант где нужно три клавиши зажать чтоб что-то тригернуть.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.