Возвращает true если на клавиатуре была нажата клавиша и false в противном случае
Здравствуйте! В этой статье я хотел бы рассказать о событиях клавиатуры. Мы с вами уже рассмотрели события мыши и вот теперь разберем события клавиатуры.
События keydown и keyup
События keydown/keyup происходят соотвественно при нажатии/отпускании клавиши на клавиатуре и позволяют получить её скан-код в свойстве keyCode.
Скан-коды
Для буквенно-цифровых клавиш есть очень простое правило: скан-код будет равен коду соответствующей заглавной английской буквы/цифры.
Для других символов, в частности, знаков пунктуации, есть таблица кодов. Эту таблицу с легкостью можно найти в Интернете.
Когда-то в этих кодах была масса кросс-браузерных несовместимостей. Сейчас всё проще – таблицы кодов в различных браузерах почти полностью совпадают. Но вот некоторые несовместимости, всё же, остались. Вы можете увидеть их в таблице ниже. Слева – клавиша с символом, а справа – скан-коды в браузерах.
Событие keypress
Событие keypress возникает сразу после события keydown, если была нажата символьная клавиша, т.е. нажатие приводит к появлению символа.
Любые буквы, цифры генерируют keypress. А вот управляющие клавиши, такие как Ctrl, Shift, F1, F2… – keypress не генерируют.
Код символа сохраняется в таких свойствах: charCode и which.
Получение символа в keypress
Вот пример функции для получения символа из события keypress:
Для общей информации – вот основные браузерные особенности, учтённые в getKey(event):
- Во всех браузерах, кроме IE, у события keypress имеется свойство charCode, которое содержит код символа.
- Браузер IE для keypress не устанавливает charCode, а вместо этого он записывает код символа в keyCode (в keydown/keyup там хранится скан-код).
- Также в функции выше используется проверка if(event.which!=0), а не более короткая if(event.which). Это не случайно! При event.which=null первое сравнение даст true, а второе – false.
Как и у других событий, связанных с пользовательским вводом, поддерживаются свойства shiftKey, ctrlKey, altKey и metaKey.
Они установлены в true, если нажаты клавиши-модификаторы – соответственно, Shift, Ctrl, Alt и Cmd для Mac (подробнее об этом здесь)
Отмена пользовательского ввода
Появление символа можно предотвратить, если отменить действие браузера на keydown/keypress ( я писал про отмену событий браузера по умолчанию)
На момент срабатывания keydown/keypress клавиша ещё не обработана браузером.
Поэтому в обработчике значение input.value – старое, т.е. до ввода. А что, если мы хотим обработать input.value именно после ввода? Самое простое решение – использовать событие keyup, либо запланировать обработчик через setTimeout(. 0).
Отмена любых действий
Отменять можно не только символ, но и любое действие клавиш.
- При отмене Backspace – символ не удалится.
- При отмене PageDown – страница не прокрутится.
- При отмене Tab – курсор не перейдёт на следующее поле.
Пример: перевод символа в верхний регистр
В примере ниже действие браузера отменяется с помощью вызова return false, а вместо него в input добавляется значение в верхнем регистре:
Пример простой чат.
В этом примере разработан простейший чат.
Несовместимости
Некоторые несовместимости в порядке срабатывания клавиатурных событий (когда что) ещё существуют.
Стоит иметь в виду три основных категории клавиш, работа с которыми отличается.
- В Safari/Chrome/Opera: при включении только keydown, при отключении только keyup.
- В Firefox: при включении и отключении только keydown.
Общий вывод можно сделать такой:
- Обычные символы работают везде корректно.
- CapsLock под MacOS ведёт себя плохо, не стоит ставить на него обработчики вообще.
- Для других специальных клавиш и сочетаний с ними следует использовать только keydown.
Итого
Итак подведем итоги:
Распространённая ошибка – использовать события клавиатуры для работы с полями ввода в формах.
Это нежелательно. События клавиатуры предназначены именно для работы с клавиатурой. Да, их можно использовать для проверки ввода в <input>, но будут недочёты. Например, текст может быть вставлен мышкой, при помощи правого клика и меню, без единого нажатия клавиши. И как нам тут помогут события клавиатуры?
Некоторые мобильные устройства также не генерируют keypress/keydown, а сразу вставляют текст в поле. Обработать ввод на них при помощи клавиатурных событий нельзя.
Далее мы разберём события для элементов форм, которые позволяют работать с вводом в формы правильно.
Их можно использовать как отдельно от событий клавиатуры, так и вместе с ними.
Задачи
Поле только для цифр
Вам нужно сделать так чтобы в текстовое поле можно вводить было только цифры.
Отследить одновременное нажатие
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Читайте также: