Ввод по маске

Ограничение ввода по маске

Хочу показать простой пример, как ограничить ввод символов по маске в текстовом поле, используя jQury и плагин Masked Input.

Плагин поддерживает следующие атрибуты:

a – разрешает ввод латинских символов (A-Z,a-z);
9 - разрешает ввод только цифр (0-9);
* - разрешает ввод как символов, так и цифр (A-Z,a-z,0-9).

Жаль, плагин не поддерживает кириллицу.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery img</title>
<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999');
$("#date2").mask("99/99/9999",{placeholder:"-"});
$("#phone2").mask("(999) 999-9999",{completed:function(){alert("Этого: "+this.val()+" достаточно!");}});
});
</script>
</head>

<body>

</body>
<input id="date" tabindex="1" type="text">
<input id="phone" tabindex="2" type="text">
<input id="date2" tabindex="3" type="text">
<input id="phone2" tabindex="4" type="text">

</html>

Для полноценной работы достаточно подгрузить библиотеку jQuery, строка 06, и сам плагин Masked Input, строка 07.

Затем при изменении содержимого поля ввода проверяется маска по его id, строка 10-13.

Если не нравится символ-заполнитель “_”, то можно указать свой, изменив аргумент placeholder, как в строке 12 указан “-“. Также можно вызывать любую функцию по окончанию ввода по маске, строка 13. В данном примере вызывается alert(), а можно, например, отправить и ajax запрос на сервер с полученными данными… но это уже кому что надо.
Далее уже сами поля ввода, строки 21- 24.

Смотрим пример!