Polytech-soft.com

ПК журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

Объекты KeyboardEvent описывают работу пользователя с клавиатурой. Каждое событие описывает клавишу; тип события (keydown, keypress или keyup) определяет произведённый тип действия.

Примечание: KeyboardEvent сообщит только о том, что на клавише произошло событие. Когда вам нужно обрабатывать ввод текста, то вместо него используйте «HTML5 input»-событие. Например, если пользователь вводит текст рукописным способом, предположим с планшета, то события клавиш могут не возникать.

keydown Событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена. keypress Событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом. keyup Событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.

Свойства объекта KeyboardEvent

altKeyВозвращает true , если нажата клавиша ALT.
ctrlKeyВозвращает true , если нажата клавиша CTRL.
shiftKeyВозвращает true , если нажата клавиша SHIFT.
metaKeyВозвращает true , если нажата клавиша META.
charCodeСодержит код Юникода сгенерированного печатного символа для события keypress .
codeОпределяет физическое расположение нажатой клавиши на клавиатуре
keyВозвращает строку, представлающее значение клавиши, на которой возникло событие.
keyCodeВозвращает виртуальный код нажатой клавиши.
localeОпределяет язык для событий клавиатуры и событий textinput.
locationОпределяет местоположение нажатой клавиши для событий клавиатуры.
whichВозвращает виртуальный код нажатой клавиши.

События keydown и keyup

События keydown/keyup происходят при нажатии/отпускании клавиши и позволяют получить её скан-код в свойстве keyCode .

Скан-код клавиши одинаков в любой раскладке и в любом регистре. Например, клавиша z может означать символ «z» , «Z» или «я» , «Я» в русской раскладке, но её скан-код будет всегда одинаков: 90 .

Скан-коды

Для буквенно-цифровых клавиш есть очень простое правило: скан-код будет равен коду соответствующей заглавной английской буквы/цифры.

Например, при нажатии клавиши S (не важно, каков регистр и раскладка) её скан-код будет равен «S».charCodeAt(0) .

Для других символов, в частности, знаков пунктуации, есть таблица кодов, которую можно взять, например, из статьи Джона Уолтера: JavaScript Madness: Keyboard Events, или же можно нажать на нужную клавишу на тестовом стенде и получить код.

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

КлавишаFirefoxОстальные браузеры
;59186
=107187
109188

Остальные коды одинаковы, код для нужного символа будет в тестовом стенде.

Тестовый стенд

Событие keypress

Событие keypress возникает сразу после keydown , если нажата символьная клавиша, т.е. нажатие приводит к появлению символа.

Любые буквы, цифры генерируют keypress. Управляющие клавиши, такие как Ctrl , Shift , F1 , F2 … – keypress не генерируют.

Событие keypress позволяет получить код символа. В отличие от скан-кода, он специфичен именно для символа и различен для «z» и «я» .

Код символа хранится в свойствах: charCode и which . Здесь скрывается целое «гнездо» кросс-браузерных несовместимостей, разбираться с которыми нет никакого смысла – запомнить сложно, а на практике нужна лишь одна «правильная» функция, позволяющая получить код везде.

Получение символа в keypress

Кросс-браузерная функция для получения символа из события keypress:

Для общей информации – вот основные браузерные особенности, учтённые в getChar(event) :

  1. Во всех браузерах, кроме IE, у события keypress есть свойство charCode , которое содержит код символа.
  2. Браузер IE для keypress не устанавливает charCode , а вместо этого он записывает код символа в keyCode (в keydown/keyup там хранится скан-код).
  3. Также в функции выше используется проверка if(event.which!=0) , а не более короткая if(event.which) . Это не случайно! При event.which=null первое сравнение даст true , а второе – false .

Модификаторы shift, alt, ctrl и meta

Во всех событиях объекты KeyboardEven t присутствует информация о нажатых клавишах-модификаторах.

Синтаксис

Возвращаемое значение

Свойство возвращает true , если нажата соответствующая клавиша, и false — в противном случае

Комментарии

Чтобы пользователи операционных систем работали с комфортом, в паре с ctrlKey нужно обязательно использовать metaKey .

В JS-коде это означает, что для удобства пользователей Mac нужно проверять

charCode

Свойство charCode содержит код Юникода сгенерированного печатного символа для события keypress

Синтаксис

Возвращаемое значение

  • Число — код символа в Юникоде для событий keypress
  • — для событий keydown и keyup .

Комментарии

Свойство не используется событиями «keydown» и «keyup».

Преобразовать код символа в Юникоде в строку можно с помощью метода String.fromCharCode().

Для событий keypress то же самое значение большинство броузеров записывают в свойство keyCode. Однако в Firefox свойство keyCode не определено для события keypress , поэтому следует использовать свойство charCode .

Данное свойство является нестандартным, отсутствует в модели событий IE8- и не имитируется в модели событий jQuery.

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

Свойство key возвращает строку, представлающее физическое расположение нажатой клавиши на клавиатуре.

Синтаксис

Комментарии

Свойство code представляет значение, которое не зависит ни от раскладки клавиатуры, ни от нажатия клавиш-модификаторов. Нажатию одной клавиши может соответствовать несколько различных символов, поэтому полученное значение не получится использовать для представления в виде текста.

Совместимость с браузерами

48,0Нет32,010,1Да

Свойство key возвращает строку, представлающее значение клавиши, на которой возникло событие.

Синтаксис

Возвращаемое значение

Для событий клавиатуры, генерирующих символы, это свойство получает значение нажатой клавиши (такое как «a» , «W» , «4» , «+», «$», . ).

Для событий клавиатуры, не генерирующих символы, это свойство содержит имя нажатой клавиши (такое как, «Tab», «Down», . ).

Совместимость с браузерами

51,09,023,0Да38

keyCode

Свойство keyCode возвращает виртуальный код нажатой клавиши.

Синтаксис

Возвращаемое значение

  • Число — код символа в Юникоде для событий keypress
  • Скан-код — для событий keydown и keyup .

Комментарии

В Firefox, свойство keyCode не работает на событие keypress (возаращает 0). Для кроссбраузерного решения можно использовать следующий код:

Свойство keyCode не было стандартизовано, но определяется всеми броузерами, включая IE.

locale

Свойство locale определяет язык для событий клавиатуры и событий textinput.

Синтаксис

Возвращаемое значение

Код языка (например, «en-GB»), идентифицирующий выбранную раскладку клавиатуры,если эта информация доступна.

Комментарии

Свойство locale поддерживается не всеми браузерами,

location

Свойство location определяет местоположение нажатой клавиши для событий клавиатуры.

Синтаксис

Возвращаемое значение

Совместимость с браузерами

Да9,015,06,1Да

which

Свойство which возвращает виртуальный код нажатой клавиши.

Синтаксис

Возвращаемое значение

  • Число — код символа в Юникоде для событий keypress
  • Скан-код — для событий keydown и keyup .

Комментарии

Свойство which в IE8-. Для этих версий браузера можно использовать свойство keyCode. Однако свойство keyCode не работает для события keypress в Firefox. Для кроссбраузерного решения можно использовать следующий код:

Свойство which не стандартизовано и поэтому НЕ РЕКОМЕНДУЕТСЯ использовать.

Клавиатура: keydown и keyup

Прежде чем перейти к клавиатуре, обратите внимание, что на современных устройствах есть и другие способы «ввести что-то». Например, распознавание речи (это особенно актуально на мобильных устройствах) или Копировать/Вставить с помощью мыши.

Поэтому, если мы хотим корректно отслеживать ввод в поле , то одних клавиатурных событий недостаточно. Существует специальное событие input , чтобы отслеживать любые изменения в поле . И оно справляется с такой задачей намного лучше. Мы рассмотрим его позже в главе События: change, input, cut, copy, paste.

Читать еще:  Java document cookie

События клавиатуры же должны использоваться, если мы хотим обрабатывать взаимодействие пользователя именно с клавиатурой (в том числе виртуальной). К примеру, если нам нужно реагировать на стрелочные клавиши Up и Down или горячие клавиши (включая комбинации клавиш).

Тестовый стенд

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

Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.

События keydown и keyup

Событие keydown происходит при нажатии клавиши, а keyup – при отпускании.

event.code и event.key

Свойство key объекта события позволяет получить символ, а свойство code – «физический код клавиши».

К примеру, одну и ту же клавишу Z можно нажать с клавишей Shift и без неё. В результате получится два разных символа: z в нижнем регистре и Z в верхнем регистре.

Свойство event.key – это непосредственно символ, и он может различаться. Но event.code всегда будет тот же:

Клавишаevent.keyevent.code
Zz (нижний регистр)KeyZ
Shift + ZZ (Верхний регистр)KeyZ

Если пользователь работает с разными языками, то при переключении на другой язык символ изменится с «Z» на совершенно другой. Получившееся станет новым значением event.key , тогда как event.code останется тем же: «KeyZ» .

У каждой клавиши есть код, который зависит от её расположения на клавиатуре. Подробно о клавишных кодах можно прочитать в спецификации о кодах событий UI.

  • Буквенные клавиши имеют коды по типу «Key » : «KeyA» , «KeyB» и т.д.
  • Коды числовых клавиш строятся по принципу: «Digit » : «Digit0» , «Digit1» и т.д.
  • Код специальных клавиш – это их имя: «Enter» , «Backspace» , «Tab» и т.д.

Существует несколько широко распространённых раскладок клавиатуры, и в спецификации приведены клавишные коды к каждой из них.

Можно их прочитать в разделе спецификации, посвящённом буквенно-цифровым клавишам или просто нажмите нужную клавишу на тестовом стенде выше и посмотрите.

Выглядит очевидно, но многие всё равно ошибаются.

Пожалуйста, избегайте опечаток: правильно KeyZ , а не keyZ . Условие event.code==»keyZ» работать не будет: первая буква в слове «Key» должна быть заглавная.

А что, если клавиша не буквенно-цифровая? Например, Shift или F1 , или какая-либо другая специальная клавиша? В таких случаях значение свойства event.key примерно тоже, что и у event.code :

Клавишаevent.keyevent.code
F1F1F1
BackspaceBackspaceBackspace
ShiftShiftShiftRight или ShiftLeft

Обратите внимание, что event.code точно указывает, какая именно клавиша нажата. Так, большинство клавиатур имеют по две клавиши Shift : слева и справа. event.code уточняет, какая именно из них была нажата, в то время как event.key сообщает о «смысле» клавиши: что вообще было нажато ( Shift ).

Допустим, мы хотим обработать горячую клавишу Ctrl + Z (или Cmd + Z для Mac). Большинство текстовых редакторов к этой комбинации подключают действие «Отменить». Мы можем поставить обработчик событий на keydown и проверять, какая клавиша была нажата.

Здесь возникает дилемма: в нашем обработчике стоит проверять значение event.key или event.code ?

С одной стороны, значение event.key – это символ, он изменяется в зависимости от языка, и если у пользователя установлено в ОС несколько языков, и он переключается между ними, нажатие на одну и ту же клавишу будет давать разные символы. Так что имеет смысл проверять event.code , ведь его значение всегда одно и тоже.

Вот пример кода:

С другой стороны, с event.code тоже есть проблемы. На разных раскладках к одной и той же клавише могут быть привязаны разные символы.

Например, вот схема стандартной (US) раскладки («QWERTY») и под ней немецкой («QWERTZ») раскладки (из Википедии):

Для одной и той же клавиши в американской раскладке значение event.code равно «Z», в то время как в немецкой «Y».

Буквально, для пользователей с немецкой раскладкой event.code при нажатии на Y будет равен KeyZ .

Если мы будем проверять в нашем коде event.code == ‘KeyZ’ , то для людей с немецкой раскладкой такая проверка сработает, когда они нажимают Y .

Звучит очень странно, но это и в самом деле так. В спецификации прямо упоминается такое поведение.

Так что event.code может содержать неправильный символ при неожиданной раскладке. Одни и те же буквы на разных раскладках могут сопоставляться с разными физическими клавишами, что приводит к разным кодам. К счастью, это происходит не со всеми кодами, а с несколькими, например KeyA , KeyQ , KeyZ (как мы уже видели), и не происходит со специальными клавишами, такими как Shift . Вы можете найти полный список проблемных кодов в спецификации.

Чтобы отслеживать символы, зависящие от раскладки, event.key надёжнее.

С другой стороны, преимущество event.code заключается в том, что его значение всегда остаётся неизменным, будучи привязанным к физическому местоположению клавиши, даже если пользователь меняет язык. Так что горячие клавиши, использующие это свойство, будут работать даже в случае переключения языка.

Хотим поддерживать клавиши, меняющиеся при раскладке? Тогда event.key – верный выбор.

Или мы хотим, чтобы горячая клавиша срабатывала даже после переключения на другой язык? Тогда event.code может быть лучше.

Автоповтор

При долгом нажатии клавиши возникает автоповтор: keydown срабатывает снова и снова, и когда клавишу отпускают, то отрабатывает keyup . Так что ситуация, когда много keydown и один keyup , абсолютно нормальна.

Для событий, вызванных автоповтором, у объекта события свойство event.repeat равно true .

Действия по умолчанию

Действия по умолчанию весьма разнообразны, много чего можно инициировать нажатием на клавиатуре.

  • Появление символа (самое очевидное).
  • Удаление символа (клавиша Delete ).
  • Прокрутка страницы (клавиша PageDown ).
  • Открытие диалогового окна браузера «Сохранить» ( Ctrl + S )
  • …и так далее.

Предотвращение стандартного действия с помощью event.preventDefault() работает практически во всех сценариях, кроме тех, которые происходят на уровне операционной системы. Например, комбинация Alt + F4 инициирует закрытие браузера в Windows, что бы мы ни делали в JavaScript.

Для примера, ниже ожидает телефонный номер, так что ничего кроме чисел, + , () или — принято не будет:

Заметьте, что специальные клавиши, такие как Backspace , Left , Right , Ctrl + V , в этом поле для ввода не работают. Это побочный эффект чересчур жёсткого фильтра checkPhoneKey .

Добавим ему немного больше свободы:

Теперь стрелочки и удаление прекрасно работают.

…Впрочем, мы всё равно можем ввести в что угодно с помощью правого клика мыши и пункта «Вставить» контекстного меню. Так что такой фильтр не обладает 100% надёжностью. Мы можем просто оставить всё как есть, потому что в большинстве случаев это работает. Альтернатива – отслеживать событие input , оно генерируется после любых изменений в поле , и мы можем проверять новое значение и подчёркивать/изменять его, если оно не подходит.

«Дела минувших дней»

В прошлом существовало также событие keypress , а также свойства keyCode , charCode , which у объекта события.

Но количество браузерных несовместимостей при работе с ними было столь велико, что у разработчиков спецификации не было другого выхода, кроме как объявить их устаревшими и создать новые, современные события (которые и описываются в этой главе). Старый код ещё работает, так как браузеры продолжают поддерживать и keypress , и keyCode с charCode , и which , но более нет никакой необходимости в их использовании.

Итого

Нажатие клавиши всегда генерирует клавиатурное событие, будь то буквенно-цифровая клавиша или специальная типа Shift или Ctrl и т.д. Единственным исключением является клавиша Fn , которая присутствует на клавиатуре некоторых ноутбуков. События на клавиатуре для неё нет, потому что она обычно работает на уровне более низком, чем даже ОС.

  • keydown – при нажатии на клавишу (если клавиша остаётся нажатой, происходит автоповтор),
  • keyup – при отпускании клавиши.

Главные свойства для работы с клавиатурными событиями:

  • code – «код клавиши» ( «KeyA» , «ArrowLeft» и так далее), особый код, привязанный к физическому расположению клавиши на клавиатуре.
  • key – символ ( «A» , «a» и так далее), для не буквенно-цифровых групп клавиш (таких как Esc ) обычно имеет то же значение, что и code .

В прошлом события клавиатуры иногда использовались для отслеживания ввода данных пользователем в полях формы. Это ненадёжно, потому как ввод данных не обязательно может осуществляться с помощью клавиатуры. Существуют события input и change специально для обработки ввода (рассмотренные позже в главе События: change, input, cut, copy, paste). Они срабатывают в результате любого ввода, включая Копировать/Вставить мышью и распознавание речи.

События клавиатуры же должны использоваться только по назначению – для клавиатуры. Например, чтобы реагировать на горячие или специальные клавиши.

Задачи

Отследить одновременное нажатие

Создайте функцию runOnKeys(func, code1, code2, . code_n) , которая запускает func при одновременном нажатии клавиш с кодами code1 , code2 , …, code_n .

Например, код ниже выведет alert при одновременном нажатии клавиш «Q» и «W» (в любом регистре, в любой раскладке)

Необходимо использовать два обработчика событий: document.onkeydown и document.onkeyup .

Создадим множество pressed = new Set() , в которое будем записывать клавиши, нажатые в данный момент.

В первом обработчике будем добавлять в него значения, а во втором удалять. Каждый раз, как отрабатывает keydown , будем проверять – все ли нужные клавиши нажаты, и, если да – выводить сообщение.

Keyboard: keydown and keyup

Before we get to keyboard, please note that on modern devices there are other ways to “input something”. For instance, people use speech recognition (especially on mobile devices) or copy/paste with the mouse.

So if we want to track any input into an field, then keyboard events are not enough. There’s another event named input to track changes of an field, by any means. And it may be a better choice for such task. We’ll cover it later in the chapter Events: change, input, cut, copy, paste.

Keyboard events should be used when we want to handle keyboard actions (virtual keyboard also counts). For instance, to react on arrow keys Up and Down or hotkeys (including combinations of keys).

Teststand

To better understand keyboard events, you can use the teststand below.

Try different key combinations in the text field.

Keydown and keyup

The keydown events happens when a key is pressed down, and then keyup – when it’s released.

event.code and event.key

The key property of the event object allows to get the character, while the code property of the event object allows to get the “physical key code”.

For instance, the same key Z can be pressed with or without Shift . That gives us two different characters: lowercase z and uppercase Z .

The event.key is exactly the character, and it will be different. But event.code is the same:

Keyevent.keyevent.code
Zz (lowercase)KeyZ
Shift + ZZ (uppercase)KeyZ

If a user works with different languages, then switching to another language would make a totally different character instead of «Z» . That will become the value of event.key , while event.code is always the same: «KeyZ» .

Every key has the code that depends on its location on the keyboard. Key codes described in the UI Events code specification.

  • Letter keys have codes «Key » : «KeyA» , «KeyB» etc.
  • Digit keys have codes: «Digit » : «Digit0» , «Digit1» etc.
  • Special keys are coded by their names: «Enter» , «Backspace» , «Tab» etc.

There are several widespread keyboard layouts, and the specification gives key codes for each of them.

Read the alphanumeric section of the spec for more codes, or just press a key in the teststand above.

Seems obvious, but people still make mistakes.

Please evade mistypes: it’s KeyZ , not keyZ . The check like event.code==»keyZ» won’t work: the first letter of «Key» must be uppercase.

What if a key does not give any character? For instance, Shift or F1 or others. For those keys, event.key is approximately the same as event.code :

Keyevent.keyevent.code
F1F1F1
BackspaceBackspaceBackspace
ShiftShiftShiftRight or ShiftLeft

Please note that event.code specifies exactly which key is pressed. For instance, most keyboards have two Shift keys: on the left and on the right side. The event.code tells us exactly which one was pressed, and event.key is responsible for the “meaning” of the key: what it is (a “Shift”).

Let’s say, we want to handle a hotkey: Ctrl + Z (or Cmd + Z for Mac). Most text editors hook the “Undo” action on it. We can set a listener on keydown and check which key is pressed.

There’s a dilemma here: in such a listener, should we check the value of event.key or event.code ?

On one hand, the value of event.key is a character, it changes depending on the language. If the visitor has several languages in OS and switches between them, the same key gives different characters. So it makes sense to check event.code , it’s always the same.

On the other hand, there’s a problem with event.code . For different keyboard layouts, the same key may have different characters.

For example, here are US layout (“QWERTY”) and German layout (“QWERTZ”) under it (from Wikipedia):

For the same key, US layout has “Z”, while German layout has “Y” (letters are swapped).

Literally, event.code will equal KeyZ for people with German layout when they press Y .

If we check event.code == ‘KeyZ’ in our code, then for people with German layout such test will pass when they press Y .

That sounds really odd, but so it is. The specification explicitly mentions such behavior.

So, event.code may match a wrong character for unexpected layout. Same letters in different layouts may map to different physical keys, leading to different codes. Luckily, that happens only with several codes, e.g. keyA , keyQ , keyZ (as we’ve seen), and doesn’t happen with special keys such as Shift . You can find the list in the specification.

To reliably track layout-dependent characters, event.key may be a better way.

On the other hand, event.code has the benefit of staying always the same, bound to the physical key location, even if the visitor changes languages. So hotkeys that rely on it work well even in case of a language switch.

Do we want to handle layout-dependant keys? Then event.key is the way to go.

Or we want a hotkey to work even after a language switch? Then event.code may be better.

Auto-repeat

If a key is being pressed for a long enough time, it starts to “auto-repeat”: the keydown triggers again and again, and then when it’s released we finally get keyup . So it’s kind of normal to have many keydown and a single keyup .

For events triggered by auto-repeat, the event object has event.repeat property set to true .

Default actions

Default actions vary, as there are many possible things that may be initiated by the keyboard.

  • A character appears on the screen (the most obvious outcome).
  • A character is deleted ( Delete key).
  • The page is scrolled ( PageDown key).
  • The browser opens the “Save Page” dialog ( Ctrl + S )
  • …and so on.

Preventing the default action on keydown can cancel most of them, with the exception of OS-based special keys. For instance, on Windows Alt + F4 closes the current browser window. And there’s no way to stop it by preventing the default action in JavaScript.

For instance, the below expects a phone number, so it does not accept keys except digits, + , () or — :

Please note that special keys, such as Backspace , Left , Right , Ctrl + V , do not work in the input. That’s a side-effect of the strict filter checkPhoneKey .

Let’s relax it a little bit:

Now arrows and deletion works well.

…But we still can enter anything by using a mouse and right-click + Paste. So the filter is not 100% reliable. We can just let it be like that, because most of time it works. Or an alternative approach would be to track the input event – it triggers after any modification. There we can check the new value and highlight/modify it when it’s invalid.

Legacy

In the past, there was a keypress event, and also keyCode , charCode , which properties of the event object.

There were so many browser incompatibilities while working with them, that developers of the specification had no way, other than deprecating all of them and creating new, modern events (described above in this chapter). The old code still works, as browsers keep supporting them, but there’s totally no need to use those any more.

Summary

Pressing a key always generates a keyboard event, be it symbol keys or special keys like Shift or Ctrl and so on. The only exception is Fn key that sometimes presents on a laptop keyboard. There’s no keyboard event for it, because it’s often implemented on lower level than OS.

  • keydown – on pressing the key (auto-repeats if the key is pressed for long),
  • keyup – on releasing the key.

Main keyboard event properties:

  • code – the “key code” ( «KeyA» , «ArrowLeft» and so on), specific to the physical location of the key on keyboard.
  • key – the character ( «A» , «a» and so on), for non-character keys, such as Esc , usually has the same value as code .

In the past, keyboard events were sometimes used to track user input in form fields. That’s not reliable, because the input can come from various sources. We have input and change events to handle any input (covered later in the chapter Events: change, input, cut, copy, paste). They trigger after any kind of input, including copy-pasting or speech recognition.

We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.

Tasks

Extended hotkeys

Create a function runOnKeys(func, code1, code2, . code_n) that runs func on simultaneous pressing of keys with codes code1 , code2 , …, code_n .

For instance, the code below shows alert when «Q» and «W» are pressed together (in any language, with or without CapsLock)

We should use two handlers: document.onkeydown and document.onkeyup .

Let’s create a set pressed = new Set() to keep currently pressed keys.

The first handler adds to it, while the second one removes from it. Every time on keydown we check if we have enough keys pressed, and run the function if it is so.

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

Клавиатура один из самых важных девайсов во взаимоотношениях с пользователем. Попробуем разобраться как можно отследить что именно нажимает пользователь. Эти навыки пригодятся при построении «необычных» веб интерфейсов.

Клавиатура в состоянии сгенерировать три события: onKeyDown, onKeyUp и onKeyPress.

OnKeyDown

Срабатывает во время нажатия нажатия клавиши. Событие низшего уровня — реагирует на нажатие любой клавиши на клавиатуре (вплоть до медиаклавиш). Возвращает код нажатой клавиши.

Для нестандартных клавиш, вроде медиа, будет возвращаться бессмысленный код (255) или же событие может не сработать.

OnKeyUp

Срабатывает во время отпускания клавиши. В остальном событие аналогично keydown.

OnKeyPress

Срабатывает во время нажатия клавиши.

Заметка

Это событие должно срабатывать только по нажатию символов, имеющих ASCII код. Но в реальности разные браузеры по разному реагируют на это событие: IE и Chrome работают как и планировалось — нет реакции на клавиши, не имеющие ASCII кода. Firefox и Opera же реагируют на такие клавиши, при чем по разному: FF возвращает для таких 0, а Opera код клавиши аналогичный keyUp/keyDown.

KeyPress возвращает ASCII код нажатого символа. Это значит, что событие вернет разные коды, если пользователь нажал по букве «а», или «А», или «f», несмотря на то, что на клавиатуре это одна и та же кнопка. Т.е. это событие учитывает регистр символа, языковую раскладку, состояние клавиш Shift, Caps Lock, Alt, Ctrl. Можно сказать, что это более «интеллектуальное» событие по сравнению с keyDown/keyUp.

Заметка

Хоть onKeyPress и учитывает состояние Shift, Caps Lock, Alt, Ctrl, т.к. они влияют на то как и какой именно отобразится символ, но с помощью этого события нельзя определить состояние этих клавиш. Для этого нужно использовать keyUp/keyDown.

Узнаем больше о событии

Любое событие возвращает объект Event, который содержит дополнительную информацию о произошедшем событии. Для корректной кроссбраузерной обработки этого объекта используем такое условие:

keyCode или keyChar

Два простых и похожих свойства: keyCode возвращает код нажатой клавиши, keyChar — ASCII код нажатого символа. Как понимаешь, при нажатии одной клавиши, значения этих свойств должны отличаться.

IE и Opera не поддерживают keyChar. Едиственный способ получить ASCII код символа — это использовать keyCode для событие onKeyPress.

Как узнать какая клавиша нажата

Узнать числовой код нажатой клавиши поможет свойство which, а для тех браузеров, которые с ним незнакомы — keyCode.

Демо пример. Кто читал внимательно уже догадался, что для определения нажатой клавиши подходят только события onKeyUp/onKeyDown.

Заметка

event — это не обязательно обозначение объекта Event. Можно использовать любое имя, многие используют e или ev.

Как узнать какой символ нажат

Для этого предназначен метод String.fromCharCode. Чтобы полученный код был верным во всех браузерах, приходится анализировать только событие onKeyPress.

Как узнать зажат(ы) ли Shift, Alt, Ctrl

Для этого используются методы shiftKey, altKey, ctrlKey. Они возвращают true, если соответствующая клавиша зажата или false, если не зажата. Чтобы кроссбраузерно определить состояние клавиш следует анализировать события onKeyUp или onKeyDown (событие для себя выбираем в зависимости от задачи):

update 15.12.10 by myivanko — alert не сработает для некоторых зарезервированных системных комбинаций браузера. особенно таких много в Opera.

Ссылка на основную публикацию
Adblock
detector