В этом уроке мы рассмотрим создание маски для ввода данных в форму. Это даст возможность пользователям сайта вводить данные в определенном формате и никак иначе.
Шаг 1.
Для этого нужно подключить к документу фреймворк jQuery и соответствующий плагин:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
Шаг 2.
Далее вставим код, определяющий маски нашим формам:
<script type="text/javascript">
jQuery(function($) {
$.mask.definitions['~']='[+-]';
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999');
$('#phoneext').mask("(999) 999-9999? x99999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
$("#product").mask("a*-999-a999");
$("#eyescript").mask("~9.99 ~9.99 999");
});</script>
Вы можете определить маску так, как вам угодно.
9 - обозначает любую цифру, а - любую букву латинского алфавита, * - любой знак.
Определить значение символов вы также можете сами. Для этого в плагине jquery.maskedinput-1.2.2.js нужно изменить следующие строки:
definitions: {
'9': "[0-9]",
'a': "[A-Za-z]",
'*': "[A-Za-z0-9]"
Заменив [A-Za-z] на [A-Яa-я], получим возможность вводить кириллические символы вместо латинских.
Шаг 3.
При создании поля для ввода данных просто прописываем ему нужный идентификатор маски.
Например:
<input id="date" type="text" />
Маска для формы готова! Надеюсь, этот урок был для вас полезен!