jQuery.Maskedinput js - документация на русском с примерами

Плагин дает возможность быстро создать маску для номера телефона +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.

Комментарии (1)

  1. Александр Дворядкин 30 апреля 2020, 08:21 # 0
    Спасибо! Прекрасное решение!
    *Комментарий будет опубликован после проверки модератором

    [MODx] Генератор настроек MIGX

    [MODx, MIGx] Документация на русском по MIGX

    [MODX] Импорт и экспорт в MiniShop2. Реализация 1

    [JS] Маска для ввода телефона +7(___)___-__-__

    [MODx] minishop2 tips

    Как включить HTTPS (SSL) в MODX - Подробная инструкция

    [MODx, miniShop2] Генерация YML для выгрузки в маркет

    jQuery.Maskedinput js - документация на русском с примерами

    [MODx] Подсказки по API

    [OpenCart] Вывести на главную все категории с картинками

    [MODx] Сайт на обслуживании (выключить сайт)

    [MODx, MIGX] Примеры использования

    [PHP, JSON] Пример перевода с помощью Yandex Translate API

    Расширение свойств товаров minishop2

    Универсальная форма обратной связи — feedBackForm

    [MODx, Gallery] Галерея. Вывести обложки альбомов и фотографии

    [Opencart] Вернуть английский язык, если вы его удалили

    [OpenCart] Вывести модуль напрямую через контроллер

    [MODX, MIGX] Вывести getImageList только если он не пустой

    [MODX, MiniShop2] Примеры выборки where, optionFilters, innerJoin

    [MODX, MIGX] Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

    [MODX] pThumb - ресайз изображений. Примеры использования.

    [MODx, Quip] Более рабочий вариант.

    Отключить автозаполнение input

    Красивое адаптивное меню под pdoMenu

    Все записи

    Добавьте такую строчку на свой сайт за 2 минуты по инструкции
    Наш сайт использует куки, нажмите «ОК» если вы не против
    OK