События клавиатуры в Vue

Часто появляется задача отслеживать нажатие определённых клавиш на клавиатуре. Для этого в Vue есть директива "v-on" с помощью которой можно отслеживать нажатие/отжатие клавиш.

Нажатие клавиши

Приведём пример использования "v-on" для определения нажатия клавиши Enter:

<input v-on:keyup.enter="submit">

Если во время ввода в такое текстовое поле нажать клавишу Enter, то произойдёт отправка формы.

Вместо название кнопки можно использовать код (цифру). К примеру, для Enter - это цифра 13. Но стоит учесть, что использование цифр вместо названий является устаревшей практикой и на некоторых новых браузерах оно может не сработать:

<input v-on:keyup.13="submit">

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

• .enter
• .tab
• .delete (срабатывает как на «Delete», так и на «Backspace»)
• .esc
• .space
• .up
• .down
• .left
• .right

Модификаторы клавиш

Помимо нажатия отдельных клавиш, Vue может определять нажатие комбинаций, в которые входят модификаторы. К примеру, клавиши Alt или Shift. Перепишем первый пример из это статьи так, чтобы отправка формы срабатывала на нажатие комбинации Alt+Enter:

<input v-on:keyup.alt.enter="submit">

Всё что добавилось в нашем коде - это 4 символа ".alt". Vue поддерживает следующие модификторы

• .ctrl
• .alt
• .shift
• .meta

Точная комбинация клавиш

Наш предыдущий пример с нажатием Alt+Enter сработает даже если нажать Alt+Shift+Enter. Лишь бы в сработавших клавишах была нужная комбинация. Но порой появляется необходимость, чтобы отслеживалась именно нужная комбинация, чтобы не было лишних нажатий. В этом поможет модификатор ".exact". Попробуем изменить наш предыдущий пример, чтобы отправка формы была только при нажатии на комбинацию Alt+Enter и никакую другую:

<input v-on:keyup.alt.enter.exact="submit">

Как можно заметить, в конец директивы v-on был добавлен ".exact".