События клавиатуры в 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".
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: