JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

}

// Вспомогательная функция, используемая в обработчиках ondragenter и ondragleave.

// Возвращает true, если элемент а является дочерним по отношению к элементу b.

function ischild(a,b) {

for(; а; а = a.parentNode)

if (а === b) return true;

return false;

}

}

});

17.8. События ввода текста

Броузеры поддерживают три старых события ввода с клавиатуры. События «keydown» и «keyup» являются низкоуровневыми событиями и рассматриваются в следующем разделе. Однако событие «keypress» является высокоуровневым, сообщающим, что был введен печатаемый символ. Проект спецификации «DOM Level 3 Events» определяет более обобщенное событие «textinput», генерируемое в ответ на ввод текста, независимо от того, каким способом он был введен (например, с клавиатуры, копированием данных из буфера обмена или с помощью операции буксировки, методом ввода текста на азиатских языках или с помощью системы распознавания речи или распознавания рукописного текста). На момент написания этих строк событие «textinput» еще не поддерживалось, но броузеры на основе ядра Webkit поддерживали очень похожее событие «textInput» (с заглавной буквой «I»).

С предлагаемым событием «textinput» и реализованным в настоящее время событием «textInput» передается простой объект события, имеющий свойство

data
, хранящее введенный текст. (Другое предлагаемое спецификацией свойство,
inputMethod
, должно определять источник ввода, но оно пока не реализовано.) В случае ввода с клавиатуры свойство
data
обычно будет содержать единственный символ, но при вводе из других источников в нем может содержаться множество символов.

Объект события, передаваемый с событием «keypress», имеет более сложную организацию. Событие «keypress» представляет ввод единственного символа. Этот символ содержится в объекте события в виде числового значения кодового пункта Юникода и, чтобы преобразовать его в строку, необходимо использовать метод

String.fromCharCode
. В большинстве броузеров кодовый пункт введенного символа сохраняется в свойстве
keyCode
объекта события. Однако по историческим причинам в Firefox вместо него используется свойство
charCode
. В большинстве броузеров событие «keypress» возбуждается только при вводе печатаемого символа. Однако в Firefox событие «keypress» возбуждается также для непечатаемых символов. Чтобы отличить эти два случая (и проигнорировать непечатаемые символы), можно проверить, существует ли свойство
charCode
объекта события и содержит ли оно значение 0.

События «textinput», «textinput» и «keypress» можно отменить, чтобы предотвратить ввод символа. То есть эти события можно использовать для фильтрации ввода. Например, можно предотвратить ввод алфавитных символов в поле, предназначенное для ввода числовых данных. В примере 17.6 демонстрируется модуль на языке JavaScript, реализующий такого рода фильтрацию. Он отыскивает элементы

<input type=text>
с дополнительным (нестандартным) атрибутом
data-allowed-chars
. Регистрирует обработчики событий «textinput», «textInput» и «keypress» для всех найденных элементов и ограничивает возможность ввода символами, перечисленными в атрибуте
data-allowed-chars
. Первый комментарий в начале примера 17.6 включает образец разметки HTML, использующей этот модуль.

Пример 17.6. Фильтрация ввода пользователя

/**

* InputFilter.js: фильтрация ввода для элементов <input>

*

* Этот модуль отыскивает все элементы <input type="text"> в документе, имеющие

* атрибут "data-allowed-chars". Регистрирует обработчики событий keypress, textinput

* и textinput для этих элементов, чтобы ограничить набор допустимых для ввода символов,

* чтобы разрешить вводить только символы, указанные в атрибуте. Если элемент <input>

* также имеет атрибут "data-messageid", значение этого атрибута интерпретируется как id

* другого элемента документа. Если пользователь вводит недопустимый символ, элемент

* с указанным id делается видимым. Если пользователь вводит допустимый символ, элемент

* с сообщением скрывается. Данный элемент с сообщением предназначается для вывода

* пояснений, почему ввод пользователя был отвергнут. Его оформление необходимо

* реализовать с помощью CSS так, чтобы изначально он был невидим.

*