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

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

e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор

return; // Не фильтровать это событие

// Преобразовать код символа в строку

var text = String.fromCharCode(code);

}

// Отыскать необходимую нам информацию в этом элементе input

var allowed = target.getAttribute("data-allowed-chars");
// Допустимые символы

var messageid = target.getAttribute("data-messageid"); // Сообщение id

if (messageid) // Если указано значение id, получить элемент

var messageElement = document.getElementByld(messageid);

// Обойти в цикле символы во введенном тексте

for(var і = 0; і < text.length; i++) {

var c = text.charAt(i);

if (allowed.indexOf(c) == -1) { // Недопустимый символ?

// Отобразить элемент с сообщением, если указан

if (messageElement) messageElement.style.visibility="visible";

// Отменить действия по умолчанию, чтобы предотвратить вставку текста

if (е.preventDefault) е.preventDefault;

if (е.returnValue) е.returnValue = false;

return false;

}

}

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

// с сообщением, если он был указан.

if (messageElement) messageElement.style.visibility = "hidden";

}

}):

События «keypress» и «textinput» генерируются непосредственно перед фактической вставкой нового текста в элемент документа, обладающий фокусом ввода, благодаря чему обработчики этих событий могут предотвратить вставку текста, отменив событие. Броузеры также реализуют событие «input», которое возбуждается после вставки текста в элемент. Это событие нельзя отменить и соответствующий ему объект события не содержит информации о вставленном тексте - оно просто извещает о том, что текстовое содержимое элемента изменилось. Если, к примеру, потребуется обеспечить ввод только символов в верхнем регистре, можно определить обработчик события «input», как показано ниже:

SURNAME: <input type="text" oninput="this.value = this.value.toUpperCase; ">

Событие «input» стандартизовано в спецификации HTML5 и поддерживается всеми современными броузерами, кроме IE. Похожего эффекта в IE можно добиться, обнаруживая изменение значения свойства value текстового элемента ввода с помощью нестандартного события «propertychange*. В примере 17.7 демонстрируется, как можно реализовать преобразование всех вводимых символов в верхний регистр переносимым образом.

Пример 17.7. Использование события «propertychange» для определения факта ввода текста

function forceToUpperCase(element) {

if (typeof element === "string") element=document.getElementByld(element);

element.oninput = upcase;

element.onpropertychange = upcaseOnPropertyChange;

// Простой случай: обработчик события input

function upcase(event) { this.value = this.value.toUpperCase: }

// Сложный случай: обработчик события propertychange

function upcaseOnPropertyChange(event) {

var e = event || window.event;

// Если значение свойства value изменилось

if (e.propertyName === "value") {