События «keypress» и «textinput» генерируются непосредственно перед фактической вставкой нового текста в элемент документа, обладающий фокусом ввода, благодаря чему обработчики этих событий могут предотвратить вставку текста, отменив событие. Броузеры также реализуют событие «input», которое возбуждается после вставки текста в элемент. Это событие нельзя отменить и соответствующий ему объект события не содержит информации о вставленном тексте - оно просто извещает о том, что текстовое содержимое элемента изменилось. Если, к примеру, потребуется обеспечить ввод только символов в верхнем регистре, можно определить обработчик события «input», как показано ниже:
Событие «input» стандартизовано в спецификации HTML5 и поддерживается всеми современными броузерами, кроме IE. Похожего эффекта в IE можно добиться, обнаруживая изменение значения свойства value текстового элемента ввода с помощью нестандартного события «propertychange*. В примере 17.7 демонстрируется, как можно реализовать преобразование всех вводимых символов в верхний регистр переносимым образом.
Пример 17.7. Использование события «propertychange» для определения факта ввода текста
function forceToUpperCase(element) {
if (typeof element === "string") element=document.getElementByld(element);
function upcase(event) { this.value = this.value.toUpperCase: }
// Сложный случай: обработчик события propertychange
function upcaseOnPropertyChange(event) {
var e = event || window.event;
// Если значение свойства value изменилось
if (e.propertyName === "value") {
// Удалить обработчик onpropertychange, чтобы избежать рекурсии
this.onpropertychange = null;
// Преобразовать все символы в верхний регистр
this.value = this.value.toUpperCase;
// И восстановить обработчик события propertychange
this.onpropertychange = upcaseOnPropertyChange;
}
}
}
17.9. События клавиатуры
События «keydown» и «keyup» возбуждаются, когда пользователь нажимает или отпускает клавишу на клавиатуре. Они генерируются для клавиш-модификаторов, функциональных клавиш и алфавитно-цифровых клавиш. Если пользователь удерживает клавишу нажатой настолько долго, что включается режим автоповтора, будет сгенерировано множество событий «keydown», прежде чем появится событие «keyup».
Объект события, соответствующий этим событиям, имеет свойство
keyCode
с числовым значением, которое определяет нажатую клавишу. Для клавиш, генерирующих печатаемые символы, в общем случае свойство
keyCode
содержит кодовый пункт Юникода, соответствующий основному символу, изображенному на клавише. Клавиши с буквами всегда генерируют значения
keyCode
, соответствующие символам в верхнем регистре, независимо от состояния клавиши Shift, поскольку именно такие символы изображены на клавишах. Аналогично цифровые клавиши всегда генерируют значения
keyCode
, соответствующие цифровым символам, изображенным на клавишах, даже если при этом вы удерживали нажатой клавишу Shift, чтобы ввести знак препинания. Для клавиш, не соответствующих печатаемым символам, свойство
keyCode
будет иметь некоторое другое значение. Эти значения свойства
keyCode
никогда не были стандартизованы. Однако в разных броузерах они отличаются не настолько сильно, чтобы нельзя было обеспечить переносимость. Это демонстрирует пример 17.8, включающий реализацию отображения значений
keyCode
в имена функциональных клавиш.
Подобно объектам событий мыши, объекты событий клавиатуры имеют свойства
altKey, ctrlKey, metaKey
и
shiftKey
, которые получают значение true, если в момент возникновения события удерживалась нажатой соответствующая клавиша-модификатор.
События «keydown* и «кеуuр», а также свойство
keyCode
используются уже более десяти лет, но они так и не были стандартизованы. Проект стандарта «DOM Level 3 Events» стандартизует типы «keydown» и «кеуuр» событий, но не стандартизует свойство
keyCode
. Вместо этого он определяет новое свойство
key
, которое должно содержать название клавиши в виде строки. Если клавиша соответствует печатаемому символу, свойство
key
должно содержать этот печатаемый символ. Для функциональных клавиш свойство
key
должно содержать такие значения, как «F2», «Home» или «Left».
На момент написания этих строк свойство
key
, определяемое стандартом «DOM Level 3 Events», еще не было реализовано ни в одном из броузеров. Однако броузеры на базе механизма Webkit, Safari и Chrome определяют в объектах этих событий свойство
keyIdentifier
. Для функциональных клавиш, подобно свойству
key
, свойство
keyldentifier
содержит не число, а строку с именем клавиши, таким как «Shift» или «Enter». Для клавиш, соответствующих печатаемым символам, это свойство содержит менее удобное в использовании строковое представление кодового пункта Юникода символа. Например, клавише «А» соответствует значение «U+0041».
В примере 17.8 определяется класс
Keymар
, который отображает идентификаторы комбинаций клавиш, такие как «PageUp», «Alt_Z» и «ctrl+alt+shift+F5» в функции на языке JavaScript, вызываемые в ответ на нажатия этих комбинаций. Определения привязок клавиш передаются конструктору
Кеуmap
в форме объекта JavaScript, имена свойств которого соответствуют идентификаторам комбинаций клавиш, а значения этих свойств содержат ссылки на функции-обработчики. Добавление и удаление привязок осуществляется с помощью методов
bind
и
unbind
. Устанавливается объект
Key
тар в HTML-элемент (обычно в объект
Document
) с помощью метода
install.
При установке объекта
Кеуmар
в этом элементе регистрируется обработчик события «keydown». Каждый раз, когда нажимается клавиша, обработчик проверяет наличие функции, соответствующей этой комбинации. Если функция существует, она вызывается. Обработчик события «keydown» использует свойство
key
, определяемое стандартом «DOM Level 3 Events», если оно существует. В противном случае он пытается использовать Webkit-свойство
keyldentifіег
. И как запасной вариант, обработчик использует нестандартно свойство
keyCode
. Пример 17.8 начинается с длинного комментария, подробно описывающего работу модуля.