17 февраля 2020 JavaScript jQuery
На данный момент маски ввода телефона, как например +7 (___) ___ — __ повсеместно используются на сайтах. Это исключает ошибки при вводе и проверке вводимых данных, а так же приводит сбор данных к единому формату. Как просто сделать такую и другие маски ввода рассмотрим в этой статье.
Для создания маски в полях ввода существуют различные плагины jQuery. На мой взгляд самый лучший и быстрый вариант это плагин jQuery Inputmask от Robin Herbots. Он стабильно работает и у него большое количество возможностей и настроек.
Создание маски ввода с помощью плагина jQuery Inputmask
Скачиваем плагин отсюда. Там же находится полная документация по настройке плагина. И подключаем к сайту скрипт jquery.maskedinput.min.js из папки dist. Перед скриптом конечно же нужно подключить библиотеку jQuery:
Теперь вызываем функцию маски ввода и указываем в ней шаблон ввода, например +7 (999) 999-9999. Код необходимо разместить перед закрывающим тегом .
$(document).ready(function(){
$(".phone").inputmask("+7 (999) 999-9999");
});
Теперь маска ввода телефона по этому шаблону будет работать у всех полей, у которых будет указан class="phone":
В шаблоне можно задавать все, что угодно: цифры, буквы, символы и т.д. Самые часто используемые это цифры и буквы. В шаблоне 9 — это любая цифра от 1 до 9; A — это любая буква. Например:
$('.phone').inputmask('999[-AAA]');
Так же маску ввода можно задать непосредственно в самом input с помощью атрибута data-inputmask: