На этом шаге мы рассмотрим способ блокировки ввода нечисловых значений.
Совершенствуя форму ввода контактной информации, мы рассматривали некоторые приемы проверки вводимых данных. С помощью JavaScript мы выполняли проверку ввода, выясняя, совпадает ли ввод пользователя с тем, что ожидается получить, чтобы можно было обеспечить обратную связь еще до того, как форма будет отправлена на сервер. Теперь мы исследуем похожий прием, который называется маскированием ввода.
В ходе проверки ввода выясняется, соответствует ли ввод пользователя некоторым критериям. При маскировании ввода критерии применяются непосредственно в процессе ввода, а недопустимые символы просто отвергаются. В нашей форме, моделирующей корзину с покупками, например, поля ввода могут содержать только числа. Программный код, реализующий маскирование ввода, может просто игнорировать нажатия нецифровых клавиш, когда фокусом ввода обладает одно из таких полей:
$('.quantity input').keypress(function(event) {
if (event.which && (event.which < 48 ||
event.which > 57)) {
event.preventDefault();
}
});
Когда мы разрабатывали функцию автодополнения для поля поиска, момент нажатия клавиши определялся нами по событию keyup. Это давало нам возможность проверять содержимое свойства .keyCode объекта события, по которому можно было определить, какая клавиша была нажата. Однако в данном примере мы будем использовать событие keypress. Объект event этого события не имеет свойства .keyCode, но вместо него он предлагает свойство .which, которое содержит фактический символ ASCII, соответствующий нажатой клавише.
Если была нажата символьная клавиша (то есть это не клавиша со стрелкой, не клавиша delete или какая-либо другая специальная клавиша редактирования) и символ, который она представляет, не входит в диапазон кодов ASCII, соответствующих цифрам, то вызывается метод .preventDefault() объекта события. Как уже говорилось ранее, этот метод предотвращает выполнение броузером действий по умолчанию, что в данном случае означает, что символ не будет добавлен в поле. Теперь в поля, описывающие количественные характеристики, можно будет вводить только числа.
Рис.1. Используются только числовые клавиши
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим арифметические вычисления.
