Обработчики событий клавиатуры могут применяться в элементах <input> и <text_ area> для фильтрации ввода, получаемого от пользователя. Например, предполо_ жим, что вы хотите заставить пользователя вводить только прописные символы:
Фамилия: <input id="surname" type="text"
onkeyup="this.value = this.value.toUpperCase();">
При возникновении события клавиатуры элемент <input> добавляет введенные символы в свое свойство value. К тому моменту, когда произойдет событие keyup, свойство value уже обновится, и потому его можно просто преобразовать его
в верхний регистр. Этот прием работает независимо от положения курсора ввода
в текстовом поле, позволяя использовать модель DOM Level 0. Вам не требуется знать, какая клавиша была нажата, а потому не нужно обращаться к объекту со_ бытия. (Обратите внимание: если пользователь вставляет в поле ввода скопиро_ ванный текст с помощью мыши, обработчик события onkeyup не вызывается. Чтобы обработать эту ситуацию, вам, скорее всего, потребуется зарегистриро_ вать обработчик события onchange. Дополнительную информацию об элементах формы и их обработчиках событий вы найдете в главе 18.)
Сложнее выполнять фильтрацию событий клавиатуры с использованием обработ_ чика onkeypres, когда необходимо ограничить возможность ввода некоторых сим_ волов, например предотвратить возможность ввода алфавитных символов в поле с числовыми данными. Пример 17.5 содержит определение ненавязчивого моду_ ля, который позволяет выполнять фильтрацию именно такого рода. Он отыски_ вает теги <input type=text>, в которых имеется дополнительный (нестандартный) атрибут с именем allowed. Модуль регистрирует обработчики события keypress для всех таких текстовых полей ввода с целью ограничить возможность ввода символами, перечисленными в атрибуте allowed. В комментарии, расположен_ ном в начале примера 17.5, приводятся некоторые фрагменты HTML_кода, в ко_ торых демонстрируется порядок использования модуля.
Пример 17.5. Ограничение возможности ввода определенными наборами символов
/**
* InputFilter.js: ненавязчивая фильтрация нажатий клавиш для тегов <input>
*
* Данный модуль отыскивает все элементы <input type="text"> в документе,
* которые имеют нестандартный атрибут "allowed". Регистрирует обработчик
* события onkeypress для всех таких элементов с целью ограничить возможность
* ввода символов только теми, которые перечислены в значении атрибута allowed.
* Если элемент <input> имеет при этом атрибут "messageid", значение
* этого атрибута воспринимается как id другого элемента документа.
* Когда пользователь пытается ввести недопустимый символ, отображается
* элемент messageid. Когда пользователь вводит допустимый символ,
* элемент messageid скрывается. Элемент с данным идентификатором предназначен
* для вывода пояснений, почему попытка ввода того или иного символа была отвергнута.
* Изначально этот элемент с помощью CSS_стиля должен быть сделан невидимым.
*
* Далее приводятся некоторые примеры HTML_кода, использующие этот модуль.
// attachEvent не используется, потому что в этом случае
// функции_обработчику передается некорректное значение
// ключевого слова this.
tag.onkeypress = filter;
}
}
}
// Это обработчик события keypress, который выполняет фильтрацию ввода function filter(event) {
// Получить объект события и код символа переносимым способом var e = event || window.event; // Объект события клавиатуры
var code = e.charCode || e.keyCode; // Какая клавиша была нажата
// Если была нажата функциональная клавиша, не фильтровать ее
if (e.charCode == 0) return true; // Функциональная клавиша (только Firefox) if (e.ctrlKey || e.altKey) return true; // Нажата Ctrl или Alt
if (code < 32) return true; // Управляющий ASCII_символ
// Теперь получить информацию из элемента ввода
var allowed = this.getAttribute("allowed"); // Допустимые символы var messageElement = null; // Сообщение об ошибке
var messageid = this.getAttribute("messageid"); // id элемента с сообщением, // если есть
if (messageid) // Если существует атрибут messageid, получить элемент messageElement = document.getElementById(messageid);
// Преобразовать код символа в сам символ
444 Глава 17. События и обработка событий
var c = String.fromCharCode(code);
// Проверить, принадлежит ли символ к набору допустимых символов if (allowed.indexOf(c) != _1) {
// Если c _ допустимый символ, скрыть сообщение, если существует if (messageElement) messageElement.style.visibility = "hidden"; return true; // И принять ввод символа
}
else {
// Если c _ недопустимый символ, отобразить сообщение
if (messageElement) messageElement.style.visibility = "visible"; // И отвергнуть это событие keypress
if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false;
}
}
})(); // Конец определения анонимной функции и ее вызов.
