Masked Input – своя маска для полей ввода input/textarea на jQuery

Когда вы добавляете то или иное поле на свой сайт, то необходимо позаботиться о том, чтобы пользователь знал, каким образом его нужно заполнять.

Например, e-mail обязательно требует наличия значка собаки @, телефон же, в свою очередь, должен начинаться на +7 и так далее.

Как сделать проверку e-mail на валидность, мы вами уже рассматривали в предыдущих статьях. А вот как сделать свою маску, например, для телефона, я сейчас расскажу.

Для решения таких задач существует плагин под названием «Masked Input». С помощью него мы можем с вами сделать свою маску, то есть задать нужный нам формат для ввода данных.

1. Скачайте архив в конце статьи.

2. Содержимое загрузите на ваш сайт, после чего скрипт подключите перед закрывающим тегом </body> на нужных страницах вашего сайта:

<script src="/js/jquery.maskedinput-1.1.3.js" type="text/javascript"></script>

Теперь мы более детально рассмотрим варианты установки нашей маски.

Установка маски для ввода телефона

Предположим, что ваш сайт нацелен на Россию и большинство сотовых телефонов имеют одиннадцать цифр, начиная с 7. Тогда маска для такого варианта будет выглядеть следующим образом:

<input type="text" id="phone" placeholder="+7 (___) ___-__-__">

<script>

	$(function() {

		$("#phone").mask("+7 (999) 999-99-99");

	});

</script>

«#phone» в скрипте указывает на поле, которому нужно присвоить маску.

Установка маски для ввода даты

Дата у нас может вводиться по-разному, например, 10.10.2017 или 10/10/2017. Попробуем составить маску для второго варианта:

<input type="text" id="date" placeholder="dd/mm/yyyy">

<script>

	$(function() {

		$("#date").mask("99/99/9999");

	});

</script>

Все как надо. Если разделителем в дате у вас является не «/», а точка, то просто заменяете ею слэш в скрипте.

По такому принципу создаются все маски, будь то почтовый индекс или, например, какой-то ваш нестандартный вид ввода информации.

Допустимые типы ввода данных

Как вы заметили в примерах выше, везде мы используем цифру «9», которая означает, что к вводу допустимы лишь цифры от 0 до 9. Но на этом возможности плагина не ограничиваются, и вот весь перечень допустимых данных для ввода:

1. 9 – цифры от 0 до 9.

2. a (английская буква) – буквы от A до Z в обоих регистрах.

3. * – любой символ из перечисленных в первом и во втором пунктах.