Последнее обновление:
Как отобразить литеру нажатой клавиши в 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. Правда, «простота» эта, на самом деле, обманчива, ибо весь разговор идет в данном случае о нескольких дополнительных строчках кода.