Генератор случайных чисел   •   Online-инструменты
5 202 просм
6 комм
Поделиться:

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. * – любой символ из перечисленных в первом и во втором пунктах.

ФайлРазмерСсылка
6
комментариев
Андрей
8.12 в 17:41
А Вы проверяли работу скрипта? У меня не работает(
  • 0
Андрей, на сайте нет ни одного нерабочего скрипта. glass

В head вашего сайта, вставьте:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

И я думаю, что все проблемы решаться.
  • 6
forvard1993
18.03 в 21:00
А к примеру я хочу использовать такую маску: ********@gmail.com, как сделать что бы букву а не заменяло в gmAil.com ? Буду благодарен
  • 0
forvard1993, можно посмотреть пример где Вы это пытаетесь реализовать?
  • 10
Евгения
28.03 в 22:57
Здравствуйте, а подскажите пожалуйста, как написать маска для отправки почты, что обязательно стоял значок @, без него чтобы не пропускал?
  • 0
Ринат
1.04 в 11:55
Добрый день! А как сделать маску телефона на все соответствующие поля, если на лендинге есть дублирующиеся формы, то есть точно такие же, с такими же id и тд?

Делая по инструкции, думал, что применив к одной, маска появится на всех формах, оказалось - нет.

Смена id (как форме, так и в скрипе соответственно) не помогает.
  • 0
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.