Как я могу проверить, нажата ли комбинация клавиш в JavaScript

Я пишу программу, в которой хочу добавлять пользовательские горячие клавиши и хранить их. Комбинация должна быть введена пользователем. Допустим, пользователь выбирает CTRL + M. Как сохранить эту комбинацию и выдавать предупреждающее сообщение всякий раз, когда эта комбинация нажимается в Vanilla JS.


javascript html
person Vishruth Subramanian    schedule 22.03.2020    source источник
comment
Добро пожаловать в Stack Overflow! Пройдите тур (вы получите значок!) и ознакомьтесь с справочным центром. , в частности Как задать хороший вопрос? Лучше всего провести исследование, ищите связанные темы на SO и пробуйте. Если вы застряли и не можете оторваться после дополнительных исследований и поиска, опубликуйте минимально воспроизводимый пример вашего попробуйте и сказать конкретно, где вы застряли. Люди будут рады помочь.   -  person palaѕн    schedule 22.03.2020
comment
Отвечает ли это на ваш вопрос? как реализовать комбинацию клавиш быстрого доступа CTRL или SHIFT + ‹буква› через javascript?   -  person Alessandro Mandelli    schedule 22.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать событие keydown для обнаружения событий клавиатуры. также проверьте наличие клавиши Ctrl с помощью event.ctrlKey в обработчике событий.

обновить Я добавил переключатели, чтобы показать, как вы можете динамически использовать комбинацию с помощью события нажатия клавиши, а также вы можете сохранить ее в базе данных и отобразить в своем внешнем интерфейсе следующим образом:

document.addEventListener('keydown', logKey);

function logKey(e) {
  let command = document.querySelector('input[name="command"]:checked').value;
  let keypressed = document.querySelector('input[name="keypressed"]:checked').value;
  if (e.keyCode == keypressed && e[command]) alert(` ${command} + ${String.fromCharCode(e.keyCode)} pressed`);
  e.preventDefault();
  return false;
}
<label><input type="radio" name="command" value="shiftKey" checked /> Shift<label><br />
<label><input type="radio" name="command" value="ctrlKey" /> Ctrl<label><br />

<label><input type="radio" name="command" value="altKey" /> Alt<label>

<hr />

<label><input type="radio" name="keypressed" value="77" checked /> M<label><br />
<label><input type="radio" name="keypressed" value="68" /> D<label><br />
<label><input type="radio" name="keypressed" value="83" /> S<label>


<p>Focus the IFrame first (e.g. by clicking in it), then try pressing selected keys.</p>
<p id="log"></p>

person ROOT    schedule 22.03.2020
comment
Спасибо ... но это работает для ctrlKey, да ... Однако я хотел что-то, где мы могли бы выбрать комбинацию ... например, Shift + F, Ctrl + J или любую другую комбинацию двух клавиш ... которую можно сохранить в переменных, а затем проверить для событий нажатия клавиш... Но я не знаю, как сохранить ctrlKey как переменную - person Vishruth Subramanian; 22.03.2020
comment
Хорошо, я обновлю свой ответ, вы должны добавить это к своему вопросу, поскольку неясно, хотите ли вы этого так, как вы спрашиваете. - person ROOT; 22.03.2020
comment
Можете ли вы также добавить что-то, чтобы эта комбинация переопределяла горячие клавиши по умолчанию... например... если я использую CTRL + S, она должна переопределять горячую клавишу Chrome для СОХРАНЕНИЯ - person Vishruth Subramanian; 22.03.2020
comment
@VishruthSubramanian, я добавил код, также обратите внимание, что я добавил e.preventDefault() и return false,, чтобы остановить поведение по умолчанию. - person ROOT; 22.03.2020