JavaScript с нуля

Определение нажатия нескольких клавиш

А вот теперь эпичная часть! Самое интересное связано с определением нажатия нескольких клавиш и соответственного реагирования. Далее показано, как это можно сделать:

window.addEventListener("keydown", keysPressed, false);

window.addEventListener("keyup", keysReleased, false);

let keys = [];

function keysPressed(e) {

// сохраняет запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-нибудь

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-нибудь

// предотвращает встроенное поведение браузера

e. preventDefault();

}

}

function keysReleased(e) {

// отмечает отпущенные клавиши

keys[e.keyCode] = false;

}

Чтобы разобрать все, что здесь происходит, понадобится отдельная глава, поэтому давайте пробежимся по верхам.

Во-первых, имеется массив клавиш, хранящий каждую клавишу, которую вы нажимаете:

let keys = [];

По мере нажатия клавиш происходит вызов обработчика событий keysPressed:

function keysPressed(e) {

// хранит запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-нибудь

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-нибудь

// предотвращает встроенное поведение браузера

e. preventDefault();

}

}

Когда клавиша отпускается, происходит вызов обработчика событий keysRealesed:

function keysReleased(e) {

// помечает отпущенные клавиши

keys[e.keyCode] = false;

}

Обратите внимание, как эти два обработчика событий взаимодействуют. При нажатии клавиш для них создается запись в массиве keys со значением true. При отпускании же клавиш их значения меняются на false. Существование в массиве нажимаемых вами клавиш поверхностно, важны лишь хранимые ими значения.

До тех пор пока ничего вроде всплывающего окна уведомления не мешает правильному вызову ваших обработчиков событий, с позиции массива keys будет возникать взаимно однозначное соответствие между нажатыми и отпущенными клавишами. Учитывая это, проверка определения комбинации нажатых клавиш производится в обработчике событий keysPressed. Выделенные в следующем коде строки показывают, как это работает:

function keysPressed(e) {

// хранит запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-то

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-то

// предотвращает стандартное поведение браузера

e. preventDefault();

}

}

Важно учитывать одну деталь: некоторые комбинации клавиш приводят к реагированию браузера. Чтобы избежать выполнения браузером ненужных вам действий, используйте метод preventDefault, как это выделено, при проверке использования Ctrl + F:

function keysPressed(e) {

// хранит запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-то

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-то

// предотвращает стандартное поведение браузера

e. preventDefault();

}

}

Метод preventDefault предотвращает стандартную реакцию браузера на событие. В данном случае он не дает браузеру показать диалоговое окно поиска. Различные комбинации клавиш будут запускать различные реакции браузера, поэтому держите этот метод на вооружении, чтобы исключить их.

В любом случае, при рассмотрении кода в совокупности у вас есть схема для удобной проверки нажатия нескольких клавиш.

КОРОТКО О ГЛАВНОМ

Клавиатура выступает важным элементом взаимодействия пользователей с компьютерами и аналогичными им устройствами. Несмотря на это, не всегда приходится иметь с ней дело напрямую. Ваш браузер, различные относящиеся к тексту элементы управления и аналогичные им компоненты уже справляются с этим по умолчанию. Тем не менее есть определенные приложения, где может потребоваться непосредственно поработать с клавиатурой. Этому и была посвящена текущая глава.

Она началась максимально скучно с объяснения принципа работы событий Keyboard и их аргументов событий. По мере продвижения все становилось интереснее: вы увидели некоторые примеры кода, где были показаны действия с клавиатурой. Если у вас есть какие-либо вопросы по этой или другой теме, не стесняйтесь обращаться с ними на форум https://forum.kirupa.com.