Артём Мáлков

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

10 окт8 комм

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

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

Файл
Размер
Ссылка
jquery.maskedinput-1.1.3.zip
3,07 Kb
Скачать с сервера
jquery.maskedinput-1.4.1.zip
2,8 Kb
Скачать с сервера
Рекомендуем к просмотру
Отключаем автоматическое стирание не до конца введенной информации в плагине «Masked Input»
Статьи и советы
Проверяем e-mail на валидность на PHP/jQuery
Модули и скрипты
Объединяем несколько значений input/textarea в одном поле на jQuery
Модули и скрипты
8
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    766
      •  Гости
    1 апр в 11:55

    Добрый день! А как сделать маску телефона на все соответствующие поля, если на лендинге есть дублирующиеся формы, то есть точно такие же, с такими же id и тд?

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

    Смена id (как форме, так и в скрипе соответственно) не помогает.

      • 2
      1
        •  Пользователь
      16 апр в 00:32

      Типа так можно сделать

      $("[name='phone]'").mask("+7 (999) 999-99-99");
      • 2
      1066
        •  Команда Pandoge
      16 апр в 22:00

      Дастан, точнее так:

      $("[name='phone']").mask("+7 (999) 999-99-99");

      В одиночной кавычке недочет.

    • 2
    766
      •  Гости
    28 мар в 22:57

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

    • 12
    1066
      •  Команда Pandoge
    20 мар в 00:05

    forvard1993, можно посмотреть пример где Вы это пытаетесь реализовать?

    • 1
    766
      •  Гости
    18 мар в 21:00

    А к примеру я хочу использовать такую маску: ********@gmail.com, как сделать что бы букву а не заменяло в gmAil.com ? Буду благодарен

    • 7
    1066
      •  Команда Pandoge
    8 дек в 23:03

    Андрей, на сайте нет ни одного нерабочего скрипта. glass

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

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

    И я думаю, что все проблемы решаться.

    • 1
    766
      •  Гости
    8 дек в 17:41

    А Вы проверяли работу скрипта? У меня не работает(

Подняться наверх
«Pandoge» - помощник вебмастера