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

События клавиатуры в JavaScript - это нажатие клавиш, при вводе текста в элементах формы. В работе с этими событиями есть сложность, связанная с тем, что для них не обеспечена кроссбраузерность. При написании обработчиков иногда придётся делать отдельные функции для разных браузеров. Нужно тщательно проверять скрипты, содержащие обработчики событий клавиатуры в разных браузерах.

Событие keypress срабатывает для клавиш, при нажатии которых печатается символ, то есть буква, цифра или другой символ. Для клавиш, которые не добавляют символ, это событие не возникает. Например, нажатие клавиши ctrl не вызывает это событие. Хотя, это только в теории. Например, в FireFox нажатие некоторых несимвольных клавиш вызывает событие.

Объект события имеет свойство charCode, которое содержит код символа. Если в FireFox событие срабатывает на несимвольных клавишах, то charCode содержит 0. Коды символов начинаются с 32. Если их нужно использовать, то всё, что меньше 32, можно отфильтровать. Создадим страницу, добавим на неё поле для ввода и выведем символ, который в него печатается:

HTML код:

<input id="inp">

JavaScript

let input = document.getElementById('inp');
input.onkeypress = function (event)
  {
  let sym = event.charCode;
  if (sym >= 32)
  alert(String.fromCharCode(sym));
  };

Далеко не всегда нужно получать код конкретного символа. На практике при обработке событий клавиатуры в JavaScript чаще просто отслеживается ввод любого символа.

Объект события имеет свойства, содеращие информацию о нажатии клавиши вместе c shift, ctrl или alt. Эти свойства рассмотрены в теме о клике.

Событие keydown возникает при нажатии любой клавиши, а событие keyup возникает, когда эта клавиша отпущена. У объектов этих событий есть свойство keyCode, в котором содержится код клавиши. Этоне код символа, а именно код клавиши. Он не зависит от того, в какой раскладке была нажата клавиша. Коды клавиш с латинскими буквами совпадают с кодами заглавных букв. Коды клавиш с цифрами совпадают с кодами цифр. А остальные клавиши имеют какие-то свои коды. И они не всегда одинаковые в разных браузерах. В основном, клавиша имеет одинаковый код во всех браузерах, но есть исключения. Добавим на страницу ещё одно поле для ввода и выведем код нажатой клавиши:

HTML код:

<br>
<input id="new_input">

JavaScript

let newInput = document.getElementById('new_input');
newInput.onkeydown = function (event) {
  alert(event.keyCode);
  };