Как сделать маску для input на JQuery

Как сделать маску для input на JQuery

В данной статье описывается как сделать маску для HTML элемента input с помощью JQuery плагина.

Скачать плагин

Зачем нужен плагин mask input?

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

Что необходимо для работы плагина?

Для работы данного плагина нам потребуется JQuery библиотека, плагин mask input и input для которого мы делаем маску. Плагин и библиотеку подключаем перед закрывающим тегом </body>

jQuery плагин обязательно должен подсоединяться после jQuery библиотеки!

  1. <!-- Подключение библиотеки jQuery через CDN Google -->
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <!-- Подключение jQuery плагина Masked Input -->
  4. <script src="jquery.maskedinput.min.js"></script>

Создание маски у HTML элемента input

В нашем примере мы создадим маску у input для ввода телефона.

Находим или добавляем на страницу input для которого нужно создать маску и задаем ему класс tel.

  1. <input type="text" class="tel">

Шаблон маски задается в js коде, с помощью знаков заменяющих символы:

  • Цифра 9 - соответствует цифрам от 0 до 9
  • Буква a - соответствует любой букве из английского алфавита (A-Z, a-z)
  • Символ * - соответствует любому знаку (1-9, A-Z, a-z)

Ниже приведен пример создания маски для нашего input

  1. <!-- HTML input для которого создаем маску -->
  2. <input type="text" class="tel">
  3. <!-- Вызываем jQuery функцию в которой задаем маску для input с классом tel -->
  4. $(function(){
  5. $("#mask-tel").mask("+7 (999) 999-99-99");
  6. });

Вот так будет выглядеть input с маской

Маска для input на JQuery

По умолчанию в качестве заполнителя маски используется знак нижнего подчеркивания