Плагин дает возможность быстро создать маску для номера телефона +7(___)__-__-__, даты, номера кредитной карты и т.д.
Данная статья — перевод документации по Maskedinput на GitHub с расширеными примерами использования.
Маска определяется форматом, состоящим из литералов маски и определений маски. Любой символ, отсутствующий в списке определений ниже, считается литералом маски. Литералы маски будут автоматически вводиться для пользователя по мере их ввода и не могут быть удалены пользователем. Предопределены следующие стандартные обозначения:
9- любая цифра[0-9]a- любой символ латинского алфавита[A-Za-z]*- цифра или символ латинского алфавита[A-Za-z0-9]- Дополнительно можно определить свои
Подключение файлов
Файлы, необходимые для работы плагина (Версия jQuery 1.8.3+):
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.min.js" type="text/javascript"></script>
Примеры использования jQuery.Maskedinput
Обратите внимание, что во всех примерах на этом сайте подключен мини-плагин для решения проблемы с кликом по центру (см. последний раздел статьи)
Базовые примеры
Вызовите функцию mask для тех элементов, к которым вы хотите применить маску. Никаких дополнительных вызовов функции прописывать не нужно.
-
$("#date_1").mask("99/99/9999"); -
$("#phone_1").mask("(999) 999-9999"); -
$("#card").mask("9999-9999-9999-9999");
Продвинутое использование плагина
Маска для ввода номера телефона
Разберем разные варианты кастомизации
Добавление +7, или кода региона (оператора), содержищего девятки 9
-
$("#phone_2").mask("+7(999) 999-9999"); -
$("#phone_3").mask("8(999) 999-9999"); -
$.mask.definitions['9'] = false; $.mask.definitions['5'] = "[0-9]"; $("#phone_4").mask("8(921) 555-5555");
Отключение автозаполнения
Чтобы гарантированно отключить автозаполнение применяйте технику, описанную в моей заметке.
Дополнительная кастомизация
-
$("#model").mask("9999_999",{placeholder:"-"}); -
По-умолчанию, если поле ввода теряет фокус до того как будет заполненно пользостью, данные стираются. Это поведение можно отключить:
$("#product_2").mask("9999/999/99",{autoclear: false}); -
Вы можете иметь часть вашей маски не обязательной. Перечислено после '?' внутри маски считается необязательным. Типичным примером этого является номер телефона и дополнительный добавочный номер.
$("#phone_dob").mask("8(999) 999-9999? доб.9999"); -
Если вам не достаточно стандартных обозначений (
9- цифра,a- лат. буквы,*- цифры или лат. буквы), вы всегда можете добавить свои. Например, может быть, вам нужна маска, чтобы разрешить только шестнадцатеричные символы ([A-Fa-f0-9]), или только+-. Вы можете добавить свое собственное определение для заполнителя, скажем, «h». Обратите внимание, что вы можете указать любое регулярное выражение.$.mask.definitions['h'] = "[A-Fa-f0-9]"; $("#color").mask("#hhhhhh"); $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999"); -
$.mask.definitions['h'] = "[A-Fa-f0-9]"; $("#bgcolor").mask("#hhhhhh",{ completed: function(){ this.css('background-color'+this.val()); } });
Решение проблемы с кликом по центру
Один из минусов плагина в том, что если кликнуть по центру маски, то курсор может там и остаться. Это неприятная проблема, но решается с помощью миниатюрного плагина.
jQuery-плагин для установки курсора в определенной позиции pos:
$.fn.setCursorPosition = function(pos) {
if ($(this).get(0).setSelectionRange) {
$(this).get(0).setSelectionRange(pos, pos);
} else if ($(this).get(0).createTextRange) {
var range = $(this).get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
Добавляем обработчик на поле ввода и затем ставим маску. Цифра при вызове .setCursorPosition(3) указывает на позицию, в которой должен быть поставлен курсор:
-
$("#center_ok").click(function(){ $(this).setCursorPosition(3); }).mask("+7(999) 999-9999"); $("#center_not_ok").mask("+7(999) 999-9999");
Современная альтернатива плагину
jQuery.Maskedinput был протестирован в Internet Explorer, Firefox, Safari, Opera и Chrome и весьма популярен даже в 2020 году. Однако стоит признать, что он хоть и выполняет свои функции, но все таки морально устарел (последний коммит в репозиторий был сделан в 2015 году). Основным преимуществом плагина является быстрота подключения и настройки.
Для тех, кто готов разобраться с библиотекой, которая «из коробки» не дружит с jQuery рекомендую Cleave.js. А в этом топике обсуждается как прикрутить ее к jQuery.
24:60
24 часа 60 минут
$.mask.definitions['h'] = "[012]"; $.mask.definitions['m'] = "[0123456]"; $('.tel_num').mask('h9:m9');Подскажите пожалуйста, почему скрипт работает на русской и украинской версии сайта, а как переключаем на английский не работает? Количество цифр бесконечное и маска так же не работает.
Следующий!
jQuery(document).ready(function($) {
$('input[type=«tel»]').mask("+7(999)999-9999",{placeholder:"_"});
});
$(".carNumMask").mask(«n999nn99?9»);
Пример маски для номера авто в формате А999АА123 (так же регион может быть двузначным числом)