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

всего от 290 руб