Добавляем...


Маски ввода с клавиатуры
Вы уже знаете, как обнаружить ошибки во время отправки данных формы и сразу же после их возникновения, но как не допустить их появления вообще? JavaScipt дает возможность задать ограничения на тип данных, которые могут вводиться в поле. Таким образом можно обнаружить ошибки и не допустить ввода неправильных данных уже в момент ввода. Следующий сценарий можно использовать в браузерах, и держивающих современную модель событий (см. главу 11). Здесь полю разрешаеться принимать только цифры, и это достигается путем проверки каждого введенного символа с помощью обработчика onkeypress:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<tit1е>Демонстрация маски ввода для чисел</tit1е>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/JavaScript">
<!--
function isNumberlnput (field, event)
{
var key, keyChar;

if (window.event)
key = window.event.keyCode;
else if (event)
key = event.which;
else
return true;
// Проверка на специальные символы типа возврата на одну позицию if (key == null || key == 0 || key == 8 || key == 13 || key == 27)
return true;
// Проверка на числа
keyChar = String.fromCharCode(key);
if (/\d/.test(keyChar))
{
window.status = ""; return true;
}
else
{
window.status = "Поле принимает только числа.";
return false;
}
}
//-->
</script>
</head>
<body>
<form name="testform" id="testform" action="#" method="get">
Серийный номер робота:
input type="text" name="serialnumber" id="serialnumber" size="10" maxlength="10" onkeypress="return isNumberlnpuUthis, event);" title="Серийный номер должен состоять только из цифр" />
</form>
</body>
</html>

В этом сценарии мы регистрируем нажатие клавиши и выясняем, является ли она допустимой. Можно было бы легко изменить этот сценарий с тем, чтобы принимать только буквы или же конвертировать буквы нижнего регистра в верхний регистр по мере их ввода.
Выгода от использования масок ввода в поля очевидна - маски ввода упрощают задачу последующей проверки введенных данных, не допуская возникновения грубых ошибок. Конечно, пользователям следует сообщить о том, что для поля используются определенные ограничения, и это достигается путем использования как информативного имени для поля, так и соответствующей подсказки (и даже сообщения об ошибке, которое мы отобразили с помощью установки сообщения о состоянии окна). Можно использовать вызов окна с предупреждением или разместить сообщение об ошибке в форме, но такой вариант может оказаться слишком навязчивым.
назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика