Номер телефона

Последнее обновление:

Как отобразить литеру нажатой клавиши в javascript

При нажатии клавиш на клавиатуре, если в браузере открыта та или иная вебстраница, происходит ряд связанных с этим событий. Мы здесь их не будем рассматривать и далее используем лишь одно из них – keydown. Напомним, что универсальный способ установки обработчика этого события выглядит примерно следующим образом:

document.addEventListener('keydown', handler, false );

где handler – это и есть функция-обработчик, которая вызывается браузером после того, как событие keydown произойдет.

Если же хотим установить обработчик только на какой-нибудь элемент (element), то тогда его можно установить следующим образом:

element.addEventListener('keydown', handler, false );

Попробуем написать функцию, которая будет выводить, собственно, саму литеру (символ) клавиши, которая была нажата. На самом деле, если браузер более-менее новый, то такая функция может выглядеть очень просто:

function handler(event) {
        alert(event.key);
 }

При этом при нажатии той или иной клавиши на клавиатуре браузер будет показывать сообщение с литерой, которая соответствует нажатой клавише. Т.е. если нажали, скажем, клавишу с цифрой 1 (на обычной, не на правой клавиатуре!), то выведется 1. Если нажали клавишу с символом z, выведется Z. И т.д.

Однако, в браузерах постарше этот код может не сработать. Например, в Firefox ниже 25 версии может выдаваться стандартное сообщение-заглушка.

Поставим вопрос шире

Рассмотрим, какие функции языка javascript могли бы использоваться для кроссбраузерного отображения символов (литер) клавиш, нажатых на клавиатуре.

Отметим сразу, что, на самом деле, есть даже соответствующая библиотека, которая, как обещает ее автор, является кроссбраузерной. Но, многие ее функции могут никогда не пригодиться разработчику. Поэтому рассмотрим, как выйти из положения буквально несколькими строчками.

В первую очередь, нас будут интересовать такие команды, как

  • event.key – получение литеры (символа) нажатой клавиши (только для более-менее современных браузеров),
  • event.keyCode – получение буквенно-цифрового кода (кроссбраузерно),
  • String.fromCharCode(event.keyCode) – получение литеры (символа) нажатой клавиши (кроссбраузерно).

Выведем результаты этих команд для клавиш стандартной русско-латинской клавиатуры компьютера под управлением Windows 7. Вначале попробуем вполне удобный, быстрый, но имеющий несколько почтенный возраст – браузер Firefox 24. Вот что получается:


Браузер Firefox 24
Клавиша event.key event.keyCode String.fromCharCode (event.keyCode)
` MozPrintableKey 192 À
1 MozPrintableKey 49 1
2 MozPrintableKey 50 2
3 MozPrintableKey 51 3
4 MozPrintableKey 52 4
5 MozPrintableKey 53 5
6 MozPrintableKey 54 6
7 MozPrintableKey 55 7
8 MozPrintableKey 56 8
9 MozPrintableKey 57 9
0 MozPrintableKey 48 0

MozPrintableKey 173
= MozPrintableKey 61 =
Backspace Backspace 8
Tab Tab 9
Q MozPrintableKey 81 Q
W MozPrintableKey 87 W
E MozPrintableKey 69 E
R MozPrintableKey 82 R
T MozPrintableKey 84 T
Y MozPrintableKey 89 Y
U MozPrintableKey 85 U
I MozPrintableKey 73 I
O MozPrintableKey 79 O
P MozPrintableKey 80 P
[ MozPrintableKey 219 Û
] MozPrintableKey 221 Ý
Enter Enter 13
CapsLock CapsLock 20
A MozPrintableKey 65 A
S MozPrintableKey 83 S
D MozPrintableKey 68 D
F MozPrintableKey 70 F
G MozPrintableKey 71 G
H MozPrintableKey 72 H
J MozPrintableKey 74 J
K MozPrintableKey 75 K
L MozPrintableKey 76 L
; MozPrintableKey 59 ;
MozPrintableKey 222 Þ
Shift Shift 16
Z MozPrintableKey 90 Z
X MozPrintableKey 88 X
C MozPrintableKey 67 C
V MozPrintableKey 86 V
B MozPrintableKey 66 B
N MozPrintableKey 78 N
M MozPrintableKey 77 M
, MozPrintableKey 188 ¼
. MozPrintableKey 190 ¾
/ MozPrintableKey 191 ¿
Control Control 17
OS OS 91 [
Alt Alt 18
Spacebar Spacebar 32
Alt Alt 18
OS OS 91 [
Menu Menu 93 ]
Control Control 17
ScrollLock ScrollLock 145
ScrollLock ScrollLock 145
Pause Pause 19
Insert Insert 45 -
Home Home 36 $
PageUp PageUp 33 !
Del Del 46 .
End End 35 #
PageDown PageDown 34 "
Up Up 38 &
Left Left 37 %
Down Down 40 (
Right Right 39 '
NumLock NumLock 144 
Divide Divide 111 o
Multiply Multiply 106 j
Subtract Subtract 109 m
Home Home 36 $
Up Up 38 &
PageUp PageUp 33 !
Add Add 107 k
Left Left 37 %
Clear Clear 12
Right Right 39 '
End End 35 #
Down Down 40 (
PageDown PageDown 34 "
Enter Enter 13
Insert Insert 45 -
Del Del 46 .
NumLock NumLock 144 
Divide Divide 111 o
Multiply Multiply 106 j
Subtract Subtract 109 m

Этот браузер характерен тем, что event.key у него работает более-менее только для «особенных» клавиш. Т.е. для тех, которые не являются буквенно-цифровыми. А для последних, увы, отображается стандартная заглушка MozPrintableKey.

Кроме того, этот браузер не «разбирает», под каким регистром нажимаются клавиши – под верхним или нижним. Также он не «разбирает», нажат ли NumLock или нет – при использовании клавиш дополнительной клавиатуры.

Эксперименты для более свежих браузеров Firefox (по крайней мере, начиная с версии 36), а также Internet Explorer 11, Edge 92 показали, что это свойство работает совершенно корректно для всех клавиш, имеющихся на клавиатуре. Удивил Internet Explorer 11: несмотря на некоторые его странности, именно здесь он работает очень даже корректно.

Итак, выводы

Для всех браузеров корректно выводится свойство event.keyCode, которое отображает коды нажатых клавиш. В общем-то, для целей кроссбраузерности, видимо, его и следует использовать в первую очередь. И именно на нем следует основывать анализ события нажатия клавиши.

Если требуется все-таки выводить именно наименование (цифру, литеру и т.д.), то стоит задуматься о формировании соответствующего массива (или объекта) примерно следующего вида:

var x = {49: 1,

50: 2,

….

87: W,

… }

Понятное дело, что для иноязычных (например, для немецкой или арабской) этот массив будет иным, в зависимости от особенностей языка (точнее, его локали).

Автоматизированный кроссбраузерный вывод наименования клавиши можно более-менее сделать с учетом следующего:

  • Для буквенно-цифровых клавиш можно использовать String.fromCharCode (event.keyCode),
  • Для остальных клавиш - event.key.

Впрочем, неизвестно, как поведут себя эти свойства в других браузерах, типа Opera, Pale Moon, Vivaldi, Google Chrome, не говоря уже о мобильных браузерах.

Кроме того, если необходимо отлавливать нажатия клавиш в зависимости от того, нажаты ли Ctrl, Shift, CapsLock, NumLock, то придется этим клавишам устанавливать соответствующие флаги и каждыйраз контролировать их значения.

Если кроссбраузерность необязательна, но хочется немного упростить написание javascript-кодов, то можно использовать event.key. Правда, «простота» эта, на самом деле, обманчива, ибо весь разговор идет в данном случае о нескольких дополнительных строчках кода.


Комментарии:
Всего комментариев:0
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



Подписаться на комментарии на этой странице

Мы можем выполнить

Другие услуги
Интересная и полезная
информация
НАПИШИТЕ НАМ
Яндекс.Метрика
Номер телефона
© Copyright Все права защищены 2013-