Маски ввода для текстовых полей

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

Маски для полей легко сделать с помощью jQuery плагина Masked input plugin.

Подключение:

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.maskedinput.min.js"></script>
HTML
1

Мобильные, Москва, МО и Санкт-Петербург.

<input type="text" class="mask-phone form-control" placeholder="Номер телефона">

<script>
$('.mask-phone').mask('+7 (999) 999-99-99');
</script>
HTML

Данная маска иногда вызывает потерю клиента, некоторые люди не видят +7 и пишут 8903... в итоге теряется последняя цифра телефона. Лучше использовать другую маску c блокировкой первой цифры 8:

$.mask.definitions['h'] = "[0|1|3|4|5|6|7|9]"
$(".mask-phone").mask("+7 (h99) 999-99-99");
JS
2

DD.MM.YYYY (25.10.2017)

$('.mask-date').mask('99.99.9999');
JS

DD.MM.YYYY hh:mm (25.10.2017 18:25)

$('.mask-date').mask('99.99.9999 99:99');
JS

YYYY-MM-DD (2017-10-25)

$('.mask-date').mask('9999-99-99');
JS

YYYY-MM-DD hh:mm (2017-10-25 18:25)

$('.mask-date').mask('9999-99-99 99:99');
JS
3

Номер карты

$('.mask-card-number').mask('9999 9999 9999 9999');
JS

Срок действия

$('.mask-card-date').mask('99/99');
JS

CVV2/CVC2

$('.mask-card-code').mask('999');
JS
4

Серия, номер

$('.mask-pasport-number').mask('99-99 999999');
JS

Код подразделения

$('.mask-pasport-division').mask('999-999');
JS

ИНН физического лица

12 значное число.

$('.mask-inn-individual').mask('999999999999');
JS

Cнилс

$('.mask-snils').mask('999-999-999 99');
JS
5

ИНН организации

$('.mask-inn-organization').mask('9999999999');
JS

ОГРН

$('.mask-ogrn').mask('9999999999999');
JS

ОГРНИП

$('.mask-ogrnip').mask('999999999999999');
JS

КПП

$('.mask-kpp').mask('999999999');
JS

БИК

9-значное число начинающееся с цифр – «04» (код Российской Федерации).

$('.mask-bik').mask('049999999');
JS

Расчетный счет

20 цифр.

$('.mask-account').mask('99999 999 9 9999 9999999');
JS
6

Водительское удостоверение

$('.mask-driver').mask('99 ** 999999');
JS

СТС (свидетельство о регистрации транспортного средства)

$('.mask-sts').mask('99 99 999999');
JS

Номер полиса ОСАГО

$('.mask-osago').mask('aaa 9999999999');
JS
7

Mac-адрес

$.mask.definitions['h'] = '[A-Fa-f0-9]';
$('.mask-mac').mask('hh:hh:hh:hh:hh:hh');
JS
20.01.2017, обновлено 16.06.2021
102650
Предыдущая запись Автовысота textarea
Следующая запись Селект с чекбоксами

Комментарии 3

Тимофей Гузь Тимофей Гузь
3 декабря 2020 в 15:17
eMail! Покажите маску на e-mail !!! Нигде нет
Валерий Макеев Валерий Макеев
24 июня 2021 в 18:47
Если ввести номер в формате 8800, то теряются две первые восьмерки
Vasily Shmyglya Vasily Shmyglya
30 ноября 2021 в 01:31
Ещё бы туда впилить type=url маску вода http и https, я бы пожал руку всем, кто приложил усилия в доработке плагина, что-то подобное если alias сделать url

А с 8800, да, там надо слегка кастомить

, чтобы добавить комментарий.

Другие публикации

date() – форматирование даты PHP
date($format, $timestamp) – форматирует дату/время по шаблону, где...
64073
+1
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
66785
+18
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
19655
+8
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
62970
+26
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
77596
+5
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
860869
+175