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.

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

  1. Александр Дворядкин 30 апреля 2020, 08:21 # 0
    Спасибо! Прекрасное решение!
    1. Василий 22 декабря 2020, 00:51 # 0
      Спасибо!!! Очень подробно и понятно!
      1. Денис 10 февраля 2021, 19:19 # 0
        Спасибо огромное! Самый простой и понятный плагин из всех, что нашел! А главное — безотказно работающий.
        1. Александр 22 февраля 2021, 09:54 # 0
          Огромное спасибо! Как этот скрипт прикрутить к формам Elementor на Wordpress?
          1. Alex 19 мая 2021, 06:54 # 0
            Курсор всегда в начале, это хорошо, а такой случай, ввел номер телефона и только тогда обнаружил что ошибся на одну цифру и как исправить? Попробуйте.
            1. Юрий 12 сентября 2021, 16:09 # 0
              Замените в примере click на focus и всё будет хорошо.
            2. Нурик 03 августа 2021, 19:34 # 0
              Здравствуйте, а подскажите пожалуйста например мне нужно ограниченное время
              24:60
              24 часа 60 минут
              1. Евгений 27 апреля 2022, 23:11 # 0
                попробуйте:
                $.mask.definitions['h'] = "[012]";
                $.mask.definitions['m'] = "[0123456]";
                $('.tel_num').mask('h9:m9');
              2. Александр 24 июня 2022, 15:22 # 0
                Спасибо! То что искал.
                Подскажите пожалуйста, почему скрипт работает на русской и украинской версии сайта, а как переключаем на английский не работает? Количество цифр бесконечное и маска так же не работает.
                1. Антон 11 июля 2022, 18:49 # 0
                  не переключайте на английский.
                  Следующий!
                2. Илья 03 февраля 2023, 19:32(Комментарий был изменён) # 0
                  Здравствуйте! Подскажите, а как в эту конструкцию интегрировать обработчик «курсор всегда вначале»?

                  jQuery(document).ready(function($) {
                  $('input[type=«tel»]').mask("+7(999)999-9999",{placeholder:"_"});
                  });
                  1. Борис 22 марта 2023, 08:08 # 0
                    $.mask.definitions['n'] = "[Аа, Вв, Ее, Кк, Мм, Нн, Оо, Рр, Сс, Тт, Уу, Хх]";
                    $(".carNumMask").mask(«n999nn99?9»);

                    Пример маски для номера авто в формате А999АА123 (так же регион может быть двузначным числом)
                    1. Vladimir Novikov 07 мая 2023, 13:09 # 0
                      Подскажите для этого примера, как сделать так, чтобы когда длина целого номера не достигается выводилось сообщение?


                      1. Vladimir Novikov 07 мая 2023, 13:09 # 0
                        Для поля ввода телефона*
                        1. grishaboss 13 ноября 2023, 12:04 # 0
                          Возможно вопрос как у Vladimir Novikov, хочу сделать динамическую маску для ввода процентов такую, что если введено «99_%» потом постилось как «99%». В идеале сделать часть маски необязательной, но не конец маски а середину, примерно так — «99?'9'% — предполагается что тут третье число может быть заполнена, а может нет, но знак % заполняется всегда). Второй вариант реализовать через {completed:function(){}}
                          1. Sergei 04 сентября 2024, 20:52 # 0
                            Еще баг один есть. Если начал заполнять номер телефона и например в середине нажал энтер или даже сразу, то не смотря на плагинчик setCursorPosition курсор сбивается на середину. Как решить лочить нажатие энтер и при завершении разлочивать? )))
                            *Комментарий будет опубликован после проверки модератором

                            Похожие статьи

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

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

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

                            Настройка Webpack - несколько точек входа и разделение на чанки

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

                            Слайдер Slick slider в контенте ресурса

                            Как сделать переменную не реактивной в Vue

                            Bxslider отображение картинок после полной загрузки слайдера

                            Как обработать POST данные в PHP

                            Примеры использования Vuex

                            Выполнить код после асинхронного запроса axios во Vue

                            Как вызвать метод из другого компонента Vue

                            Заготовки JavaScript

                            Рекурсивно вложенный компонент Vue

                            Связать значения инпутов через jQuery (биндинг)

                            Настроить Axios чтобы принимал только JSON

                            Использование async/await в JavaScript с Vue.js

                            Js-beautify - библиотека для форматирования HTML, CSS, JS

                            Использование Promise.all с примерами на VueJs

                            Создание цикла асинхронных вызовов во Vue.js

                            Манипуляция с HTML во Vue.js и cash-dom

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