Маска ввода для HTML элемента input

Александр Мальцев
Александр Мальцев
289K
62
Содержание:
  1. Назначение плагина masked input
  2. Комментарии

На этом уроке с помощью плагина masked input рассмотрим процесс создания различных масок ввода текстовым элементам формы.

Назначение плагина masked input

Плагин masked input предназначен для установления маски ввода элементу input с помощью кода JavaScript. Данный плагин для своего функционирования требует наличие подключённой библиотеки jQuery. Скачать плагин jquery.maskedinput.js (jquery.maskedinput.min) можно посредством следующей ссылки:

Демо Скачать maskedInput

Подключение плагина

После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script:

<!-- Подключение библиотеки jQuery -->
<script src="jquery.js"></script>
<!-- Подключение jQuery плагина Masked Input -->
<script src="jquery.maskedinput.min.js"></script>

Создание HTML маски ввода

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

  • Цифра 9 – соответствует цифре от 0 до 9.
  • Символ a – представляет собой любой английский символ (A-Z, a-z).
  • Знак * - представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Например рассмотрим процесс создания маски ввода телефона для элемента input, имеющего id="phone":

<!--HTML элемент, который будет иметь маску ввода телефонного номера  -->
<input  id="phone" type="text">	
<script>
//Код jQuery, установливающий маску для ввода телефона элементу input
//1. После загрузки страницы,  когда все элементы будут доступны выполнить...
$(function(){
  //2. Получить элемент, к которому необходимо добавить маску
  $("#phone").mask("8(999) 999-9999");
});
</script>
Создание HTML элементу input маски ввода телефона
Создание HTML элементу input маски ввода телефона
Внимание: По умолчанию в качестве заполнителя маски используется знак нижнего подчеркивания ('_').

Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:

<!--HTML элемент, который будет иметь заполнитель дд.мм.гггг -->
<input  id="date" type="text">
<!--HTML элемент, который будет иметь в качестве заполнителя пробел -->
<input  id="index" type="text">
<script>
$(function() {
  //задание заполнителя с помощью параметра placeholder
  $("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });
  //задание заполнителя с помощью параметра placeholder
  $("#index").mask("999999", {placeholder: " " });
});
</script>
Использование различных заполнителей в масках ввода masked input
Использование различных заполнителей в масках ввода masked input

Кроме placeholder данный плагин имеет ещё параметр completed. Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.

Например, выведем с помощью метода alert сообщение пользователю, когда он завершит ввод маски телефона:

<!-- Ввод номера телефона осуществляется с помощью маски  -->
<input  id="phone" type="text">
<script>
$(function(){
  //Использование параметра completed
  $("#phone").mask("8(999) 999-9999", {
    completed: function(){ alert("Вы ввели номер: " + this.val()); }
  });
});
</script>
Сообщение, отображаемое пользователю после того как он завершил ввод маски телефона
Сообщение, отображаемое пользователю после того как он завершил ввод маски телефона

Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак '?'. Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.

Например, пользователю необходимо ввести число от 0 до 0.99. При этом обязательным для заполнения является указание хотя бы одного знака после запятой.

<!-- Ввод номера телефона осуществляется с помощью маски  -->
<input  id="number" type="text">
<script>
jQuery(function($){
  //создания своего специального символа для маски
  $("#number").mask("0.9?9");
});
</script>
Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой
Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой

Настройка маски ввода Masked Input

Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков (9, a, *) свои собственные.

Например, создадим для маски специальный символ ~, который при вводе должен быть заменён на знак (+) или минус (-).

<!-- HTML элемент, имеющий маску телефона -->
<input  id="number" type="text">
<script>
jQuery(function($){
  //создания специального символа для маски
  $.mask.definitions['~']='[+-]';
  $("#number).mask("~9.99");
});
</script>
Демонстрация работы маски для ввода положительного или отрицательного числа
Демонстрация работы маски для ввода положительного или отрицательного числа

Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:

<!-- HTML элемент, имеющий маску для ввода цвета в шестнадцатиричном формате -->
<input  id="color" type="text">
<script>
jQuery(function($){
  //создания специального символа h для маски
 $.mask.definitions['h']='[A-Fa-f0-9]';
  $("#color).mask("#hhhhhh");
});
</script>
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате

Пример создания маски ввода телефона

Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:

<div class="form-group">
  <label for="phone">Телефон: </label>
  <select id="country" class="form-control">
    <option value="ru"><img src="">Россия +7</option>
    <option value="ua">Украина +380</option>
    <option value="by">Белоруссия +375</option>
  </select>
  <input id="phone" type="text" class="form-control">
</div>

<script>
jQuery (function ($) {  
  $(function() {
    function maskPhone() {
      var country = $('#country option:selected').val();
      switch (country) {
        case "ru":
          $("#phone").mask("+7(999) 999-99-99");
          break;
        case "ua":
          $("#phone").mask("+380(999) 999-99-99");
          break;
        case "by":
          $("#phone").mask("+375(999) 999-99-99");
          break;          
      }    
    }
    maskPhone();
    $('#country').change(function() {
      maskPhone();
    });
  });
});
</script>
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны

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

  1. Ilya
    Ilya
    04.11.2018, 13:36
    Для маскирования телефона у меня стоит 1.79kb скрипт на нативном .js примерно как «Сбербанк в приложении для Android», не нужны никакие библиотеки и jQvery:
    window.addEventListener(«DOMContentLoaded», function() {
    var keyCode;

    function mask(event) {
    event.keyCode && (keyCode = event.keyCode);
    var pos = this.selectionStart;
    if (pos < 3) event.preventDefault();
    var matrix = "+7 (___) ___-__-__",
    i = 0,
    def = matrix.replace(/\D/g, ""),
    val = this.value.replace(/\D/g, ""),
    new_value = matrix.replace(/[_\d]/g, function(a) {
    return i < val.length? val.charAt(i++) || def.charAt(i): a
    });
    i = new_value.indexOf("_");
    if (i != -1) {
    i < 5 && (i = 3);
    new_value = new_value.slice(0, i)
    }
    var reg = matrix.substr(0, this.value.length).replace(/_+/g,
    function(a) {
    return "\\d{1," + a.length + "}"
    }).replace(/[+()]/g, "\\$&");
    reg = new RegExp("^" + reg + "$");
    if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
    if (event.type == «blur» && this.value.length < 5) this.value = ""
    }
    var input = document.querySelector("#tel1");
    input.addEventListener(«input», mask, false);
    input.addEventListener(«focus», mask, false);
    input.addEventListener(«blur», mask, false);
    input.addEventListener(«keydown», mask, false)

    var input = document.querySelector("#tel2");
    input.addEventListener(«input», mask, false);
    input.addEventListener(«focus», mask, false);
    input.addEventListener(«blur», mask, false);
    input.addEventListener(«keydown», mask, false)
    });

    Id tel1 и tel2, если на странице 2 формы с input tel
    1. Николай
      Николай
      12.12.2018, 12:50
      Добрый день!
      Попробовал ваш код, не работает, может где-то опечатка?
      1. Александр Мальцев
        Александр Мальцев
        15.12.2018, 06:17
        Пример маски от пользователя Ilya:
        itchief.ru/examples/lab.php?topic=javascript&file=mask-phone
        1. Dmitry
          Dmitry
          16.03.2021, 18:17
          Здравствуйте!
          А можно ли Эту маску
          itchief.ru/examples/lab.php?topic=javascript&file=mask-phone
          Адаптировать к «разным» странам, по примеру в Вашей статье для разных стран(ru,ua,by)?
          Спасибо.
          1. Александр Мальцев
            Александр Мальцев
            18.03.2021, 15:02
            Привет! Можно. Например, так: открыть пример.
    2. Alex
      Alex
      16.07.2018, 10:59
      Как поставить курсор в начале маски в поле input в плагине maskedinput?
      Нужно так, чтобы куда ни поставил курсор он перемещался в начало поля.
      1. Tracktor
        Tracktor
        02.10.2017, 11:45
        Здравствуйте, Александр.

        Подскажите, как быть, если на странице множество полей ввода, которым надо задать ту же самую маску? Например, у меня формы генерятся с помощью цикла на PHP, их может быть сколько угодно. Если присвоить всем нужным инпутам один и тот же ИД, и в скрипте прописать, например

        <script>
        $(function(){
          $("#prihod").mask("99:99:99");
        });
        </script>
        
        то скрипт сработает только для первого такого инпута, а для остальных нет. Надеюсь, понятно объяснил вопрос :)
        1. spaceoberon
          spaceoberon
          01.08.2019, 16:42
          В строке инпута указан id. На странице может быть только один id. В вашем случае их становится столько много, сколько раз повторяет эту конструкцию ваша форма.
          Чтобы избежать этого, применяйте класс, который может быть применен сколько угодно раз на странице. Для этого замените id=«date» на class=«date». Как пример.
          А в коде скрипта надо сделать замену:
          вместо $("#date").mask(«99.99.9999», {placeholder: «дд.мм.гггг» });
          надо написать $(".date").mask(«99.99.9999», {placeholder: «дд.мм.гггг» });
          Вместо решетки (id) поставить точку (обращение к классу).
          Сам класс в файле css описывать не нужно.
          Все остальное остается точно таким же.
        2. Александр
          Александр
          13.06.2017, 13:18
          Александр, а как сделать чтобы форма отправлялась только если completed?
          то-есть чтобы submit не происходил по клавише Enter если не completed&
          1. Наталья
            Наталья
            24.05.2017, 11:33
            При тестировании маски ввода на android выявлен серьезный глюк.
            Если ставить курс ввода в начало поля ввода, то вводимый номер телефона после третьего символа отображается в зеркальном отражение. Например, номер +79122405678 будет иметь вид +7 9128765042. Но при этом на виндуос все корректно.

            Если курсор ввода ставим на андроиде в конце строки ввода, то все срабатывает корректно.
            Кто сталкивался с такой проблемой и как ее решить?
            1. Александр Мальцев
              Александр Мальцев
              24.05.2017, 15:22
              Плагин Masked Input имеет такую ошибку, и автор навряд ли её исправит, т.к. он забросил этот проект (он уже не обновлялся более 2 лет). Чтобы это исправить, надо править исходные коды.
              Попробуйте использовать другой плагин для маски.
            2. Olejonok
              Olejonok
              25.03.2017, 00:32
              Вопрос снимаю.
              Переопределил:
              $.mask.definitions['9'] = '';
              $.mask.definitions['n'] = '[0-9]';
              1. Павел
                Павел
                20.12.2017, 16:09
                Спасибо, что написал решение!!!
                Спас большую часть моего времени!
              2. Olejonok
                Olejonok
                24.03.2017, 23:46
                какую маску сделать для телефона начинающегося с +994?
                $("#phone").mask("+994(99) 999-99-99")
                При вводе мы видим:
                +__4(__) ___-__-__
                1. Armand
                  Armand
                  23.08.2021, 19:01
                  не нашел ответа?) столкнулся с такой же проблемой.
                  1. Olejonok
                    Olejonok
                    23.08.2021, 19:54
                    Ой давно это было, посмотрел исходник:
                    $("#phone").mask("+994(YY)YYY-YY-YY");
                2. Max
                  Max
                  26.02.2017, 14:35
                  Заметил странное поведение на мобильнике.
                  Когда вводишь номер по маске $("#phone").mask('+7(999)999-99-99') при вводе 4 знака (первого после правой скобки), знак вводится, но курсор остаётся слева и так после каждого разделителя.
                  1. Александр Мальцев
                    Александр Мальцев
                    28.02.2017, 17:06
                    Попробовал в Chrome, ничего такого не заметил. Наверно зависит от браузера.
                    1. Max
                      Max
                      28.02.2017, 22:55
                      Воспроизводится
                      Chrome 55.0.2883.91
                      Android 7.0.0
                      Sony Z5

                      Воспроизводится
                      Chrome 56.0.2924.87
                      Android 6.0.1
                      Sony Z3

                      Не воспроизводится
                      Chrome 50.0.2661.89
                      Android 4.4.2
                      SAMSUNG Galaxy Tab 4
                      1. Александр Мальцев
                        Александр Мальцев
                        01.03.2017, 17:19
                        Если критично, то попробуйте использовать другой плагин для маски: github.com/igorescobar/jQuery-Mask-Plugin
                        Подключение:
                        <script src="js/jquery.mask.min.js"></script>
                        
                        Использование:
                        <input type="text" id="phone" name="phone" required="required">
                        
                        <!-- Сценарий JavaScript -->
                        <script>
                        $(function() {
                          $("#phone").mask("+7(000)000-00-00", {
                            placeholder: "+7(___)___-__-__",
                            clearIfNotMatch: true
                          });
                        });
                        </script>
                        
                      2. buble.gena
                        buble.gena
                        28.02.2017, 18:09
                        Тоже такая проблема есть, наблюдается на ряде телефонов, например SAMSUNG GALAXY NOTE 4
                    2. Max
                      Max
                      26.02.2017, 01:20
                      Приветствую!
                      Не работает плагин, если элемент приехал через AJAX.
                      1. Александр Мальцев
                        Александр Мальцев
                        26.02.2017, 02:18
                        В этом случае необходимо воспользоваться одним из следующих способов:
                        1. Запустить инициализацию maskedinput после добавления элемента в DOM:
                        $("#id").mask("8(999) 999-9999");
                        
                        2. Вызвать при получении ответа (в ajax jquery — свойство success) собственное событие, например, as_complete:
                        $(document).trigger('as_complete');
                        
                        Теперь можно будет очень просто инициализировать элемент, а именно в тот момент когда будет возникать событие as_complete:
                        $(document).on('as_complete', document, function() {
                          $("#phone").mask("8(999) 999-9999");
                        });
                        
                        1. Max
                          Max
                          26.02.2017, 03:35
                          Спасибо!
                          Повесил событие на ajaxcomplited.

                          P.S.
                          Для мобильников в типе можно пользоваться тэгом tel, весьма удобный ввод становится.
                      2. Химик
                        Химик
                        15.02.2017, 10:59
                        Здравствуйте. Подскажите, имеется ли возможность в данном плагине задать маску для числа (в определенном диапазоне). Например, от 1 до 30?
                        1. Александр Мальцев
                          Александр Мальцев
                          18.02.2017, 01:53
                          Нет, такую маску создать не получится. Можно реализовать маску для ввода 1 или 2 цифр.
                          $("#id").mask("9?9");
                          А потом просто проводить его валидацию:
                          $('#id').keyup(function(){
                            var value = $(this).val();
                            if (parseInt(value) >= 1 && parseInt(value) <= 30) {
                              $(this).css('background-color','green');
                            } else {
                              $(this).css('background-color','red');
                            }
                          });
                        2. Вячеслав
                          Вячеслав
                          20.01.2017, 10:42
                          Здравствуйте. Подскажите, пожалуйста, как в данном плагине реализовать, чтобы маска была видна не только при событии focus, а при загрузке страницы.
                          1. Александр Мальцев
                            Александр Мальцев
                            22.01.2017, 12:43
                            Здравствуйте. Её можно указать, например, с помощью атрибута placeholder:
                            <input  id="phone1" type="text" class="form-control" placeholder="8(___) ___-____">
                            
                          2. waelayari
                            waelayari
                            08.12.2016, 14:04
                            Спасибо большой заработал… еще момент как можно validate form error message field empty или error enter all digits ???
                            1. Александр Мальцев
                              Александр Мальцев
                              11.12.2016, 12:12
                              Если вы используете его в форме, то проверку перед отправкой можно выполнить разными путями. Например, добавить к нему атрибут
                              required="required"
                              и оставить его проверку самому браузеру. Либо написать для его валидации необходимый код на JavaScript.
                              Например, что-то такое:
                              if ($('#idэлемента').val().length!=10) {
                                // вы ввели неправильное количество символов в элемент...
                              }
                              
                            2. waelayari
                              waelayari
                              29.11.2016, 10:46
                              Здравствуйте, а вы можете прислать рабоче демо файлики… у мне не заработал плагин

                              спасибо
                              1. Александр Мальцев
                                Александр Мальцев
                                30.11.2016, 12:59
                                Здравствуйте, вот ссылка на рабочий пример: yadi.sk/d/DIxQzr8kzqSX6
                              2. Neznajka
                                Neznajka
                                05.10.2016, 13:26
                                А можно ли задать маску для ввода дробного числа, которое может иметь 1 или 2 цифры в целой части, а в дробной — от 0 до 4 знаков?
                                Пробовал «9?9.9999» — не подходит: если программно поместить в это поле подходящее число (например 8.225), то после клика мышкой по этому полю данное число само преобразуется в 82.25 :(
                                1. Александр Мальцев
                                  Александр Мальцев
                                  06.10.2016, 11:24
                                  Вам необходимо сделать 2 необязательные части. Одну слева (до точки) и одну справа (после точки). А этот плагин позволяет сделать только одну необязательную часть. Поэтому сделать с помощью masked input не получится.
                                2. Oleg
                                  Oleg
                                  25.07.2016, 08:28
                                  есть похожий jquery плагин jquery.inputmask, он как раз не позволяет вводить с середины поля вводы, а автоматически ставит курсор в начало либо после последнего введенного символа
                                  1. Александра
                                    Александра
                                    05.07.2016, 12:41
                                    Коллеги, добрый день,
                                    Подскажите как возможно настроить поле для формы со следующим параметром:
                                    Требуется вводить строго 8 цифр «99999999». Но вот количество таких наборов по 8 может быть много, из разряда:
                                    99999999
                                    99999999,99999999
                                    99999999,99999999,99999999,99999999
                                    Запятая должна ставиться сама если вводятся цифры дальше.
                                    Спасибо.
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      06.10.2016, 10:51
                                      С помощью этого плагина jQuery этого не достигнуть.
                                    2. Иван
                                      Иван
                                      27.06.2016, 07:56
                                      Здравствуйте, подскажите как сделать маску для телефона +7 (xxx) xxx-xx-xx, только так чтобы если человек вбивает телефон с цифры 8, чтоб она не вбивалась первым символом, чтоб было не +7 (895) 0хх-хх-хх, а было +7 (950) ххх-хх-хх? это возможно реализовать?
                                      и можно ли сделать чтоб маска была видна при фокусирование на элемент в последней версии плагина, и курсор вставал сразу после первой скобки, как в ранних версиях?
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        06.07.2016, 13:44
                                        Этот плалин (masked input) не позволяет изменять значения маски на лету. Необходимо посмотреть что-то другое…
                                      2. Чингиз
                                        Чингиз
                                        26.06.2016, 13:02
                                        Здравствуйте. Мне нужно создать маску типа (+994) 45 123-45-67. Это реализовал. Но дело в том, что вместо (+994) может быть (+1) или (+1234). Когда делаю маску типа (+9999) 99 999-99-99, то номер (+994)… не проходит проверку. Надеюсь смог объяснить идею. Как реализовать это?
                                        1. Александр Мальцев
                                          Александр Мальцев
                                          06.07.2016, 13:49
                                          А что Вам мешает воспользоваться тем, как это сделано в примере 7. Т.е. (+994), (+1) и (+1234) в виде раскрывающего списка. А остальное значение в поле.
                                        2. Алексей
                                          Алексей
                                          15.06.2016, 20:01
                                          Подскажите пожалуйста почему после подключения jquery.maskedinput.js перестает работать кнопка «НАВЕРХ» с таким скриптом
                                          // Кнопка наверх
                                          
                                              $(document).ready(function(){
                                                   $(window).scroll(function () {
                                                          if ($(this).scrollTop() > 50) {
                                                              $('#back-to-top').fadeIn();
                                                          } else {
                                                              $('#back-to-top').fadeOut();
                                                          }
                                                      });
                                                      // scroll body to 0px on click
                                                      $('#back-to-top').click(function () {
                                                          $('#back-to-top').tooltip('hide');
                                                          $('body,html').animate({
                                                              scrollTop: 0
                                                          }, 800);
                                                          return false;
                                                      });
                                               
                                                      $('#back-to-top').tooltip('show');
                                               
                                              });
                                          

                                          из за чего конфликт? Спасибо.
                                          1. Владимир
                                            Владимир
                                            15.06.2016, 08:14
                                            Здравствуйте. Выше был задан очень хороший вопрос.
                                            Как сделать так, чтобы курсор становился в начало маски автоматически? Очень важная фишка
                                            1. Евгений
                                              Евгений
                                              29.05.2016, 14:04
                                              возможно ли сделать шаблон для ввода суммы, например ввожу 1000000, а маска отрабатывает 1.000.000 или что-то подобное?
                                              1. Александр Мальцев
                                                Александр Мальцев
                                                31.05.2016, 12:34
                                                Маска нужна для того чтобы контролировать ввод, а не форматировать отображение. Это можно сделать с помощью события, которое срабатывает когда элемент теряет фокус. Например с помощью focusout или blur.
                                              2. Евгений
                                                Евгений
                                                20.05.2016, 09:24
                                                А как сделать чтоб не давать отправлять форму если телефон не соответствует маске?
                                                1. Александр Мальцев
                                                  Александр Мальцев
                                                  23.05.2016, 12:57
                                                  Проверять свойство length на соответствие некоторому числу.
                                                  Получить значение length можно следующим образом:
                                                  $('#phone1').val().length
                                                  
                                                2. Константин
                                                  Константин
                                                  18.05.2016, 17:49
                                                  Подскажите, пожалуйста, как сделать у маски с телефоном дополнительную фишку. Заключается эта фишка в том, чтобы телефон можно было вводить не откуда хочешь, а только с начала строки. Допустим, маска в инпуте такая +7 (___) ___-__-__ По умолчанию скрипт позволяет вводить цифры с любого положения. Например, после скобок или в другом месте, если поставить туда курсор. Это происходит так +7 (___) _45-_6-8_ Необходимо что-то прописать, чтобы при постановке курсора не в начало, он возвращался в начало строки автоматически и не позволял вводить цифры с неположенного места. Для чего это нужно? Экономит время посетителям сайта для повторного ввода телефона, если они его неправильно начали вводить. Очень актуально, когда заходят с мобильника.
                                                  1. Даниил
                                                    Даниил
                                                    30.04.2016, 06:47
                                                    Подскажите как сделать что бы маска была такого типа: 4444- и после тире можно написать от 0 до 5 символов.
                                                    1. Александр Мальцев
                                                      Александр Мальцев
                                                      01.05.2016, 01:51
                                                      $.mask.definitions['d']='[0-5]';
                                                      $("#id").mask("4444-?ddddd");
                                                      
                                                      1. Cemeh
                                                        Cemeh
                                                        06.05.2016, 08:09
                                                        $("#id").mask(«4444-?ddddd»);

                                                        Ограничить действие необязательных символов как-то можно?

                                                        Допустим после 0-5 необзятельных нужны обязательные
                                                        $("#id").mask(«4444-?ddddd!?-99»);

                                                        есть какой-нибудь модификатор (условно "!?") отменяющий действие необязательности символов?

                                                        т.е. после необязательных нужны "-" и два числа например.
                                                        1. Александр Мальцев
                                                          Александр Мальцев
                                                          07.05.2016, 09:18
                                                          Такой возможности нет.
                                                        2. Даниил
                                                          Даниил
                                                          05.05.2016, 18:30
                                                          Спасибо!
                                                      2. Кос
                                                        Кос
                                                        16.04.2016, 20:48
                                                        Александр, здравствуйте. Подскажите пожалуйста, я хочу использовать маску для ввода почтового индекса. Маска индекса выглядит так: h9a-9a9, где h[L-M], 9[0-9], a[A-Z,a-z] — . Но мне надо сделать следующим образом в зависимости от того какая будет указана первая буква можно будет внести определенный диапазон цифр. К примеру, если человек введет букву M, то может вставить цифры от 0-3, а если L, то вставить от 2-5. Как то можно осуществить эту проверку? Мне надо проверять только первые три символа.

                                                        Спасибо
                                                        1. Александр Мальцев
                                                          Александр Мальцев
                                                          17.04.2016, 09:05
                                                          Здравствуйте.
                                                          С помощью плагина jquery.maskedinput.js это будет трудновато осуществить. Т.к. он не позволяет на лету изменять $.mask.definitions в зависимости от того какой символ Вы нажали.
                                                          Попробуйте _https://github.com/RobinHerbots/jquery.inputmask. Он вроде позволяет создавать динамические маски. Или как вариант, написать свою собственную маску.
                                                        2. Артем
                                                          Артем
                                                          08.03.2016, 01:40
                                                          Здравствуйте!
                                                          Подскажите пожалуйста как сформировать маску для ввода времени, например:
                                                          с 00:00 по 00:00
                                                          .
                                                          1. Александр Мальцев
                                                            Александр Мальцев
                                                            08.03.2016, 09:37
                                                            Приветствую!
                                                            Например, так:
                                                            $(function(){
                                                              $.mask.definitions['H'] = "[0-2]";
                                                              $.mask.definitions['h'] = "[0-9]";    
                                                              $.mask.definitions['M'] = "[0-5]";
                                                              $.mask.definitions['m'] = "[0-9]";
                                                              $("#id").mask("с Hh:Mm по Hh:Mm");
                                                            });
                                                            
                                                            1. Артем
                                                              Артем
                                                              08.03.2016, 10:55
                                                              Александр, спасибо огромное за оперативный ответ!
                                                              Я так пробовал, такая мысль меня посетила, но проблема заключается в том, что у нас всего 23 часа, а после нашей маски доступно для ввода становиться 24, 25, 26, 27, 28, 29.
                                                              Может быть есть возможность указать интервал например с 0 по 23, для поля Hh.
                                                              1. Артем
                                                                Артем
                                                                08.03.2016, 12:21
                                                                Если конкретного решения нету именно с использование маски, я придумал временное, но в целом рабочее решение :)
                                                                // Изменение поля "Время доставки" для значения "с чч" и "по чч"
                                                                   $('#cargoTimeByHDelivery, #cargoTimeToHDelivery').change(function()
                                                                   {
                                                                	// Идентификатор изменения
                                                                	   var cargoTimeId = this.id;
                                                                	// Значение поля для часов
                                                                	   var cargoTimeVal = this.value;
                                                                
                                                                	if (cargoTimeVal > 23)
                                                                	{
                                                                	   $('#'+cargoTimeId).val(23);
                                                                 	}
                                                                   });
                                                                
                                                          2. Александр
                                                            Александр
                                                            22.02.2016, 12:51
                                                            Не могу найти, подскажите пожалуйста. Мне надо, что бы маска была типа +7(937)___-__-__ Так как символ «9» служит для обозначения ввода цифры, то в коде прописывается: "+7(937)999-99-99". То есть пользователь видит: +7(_37)___-__-__. Как прописать уже заполненную цифру 9, а не место для ввода цифр от 0 до 9?
                                                            1. Александр Мальцев
                                                              Александр Мальцев
                                                              22.02.2016, 13:50
                                                              Вам необходимо переопределить определения и использовать маску следующим образом:
                                                              $.mask.definitions['9'] = '';
                                                              $.mask.definitions['n'] = '[0-9]';
                                                              $(function(){
                                                                $("#phone").mask("8(937) nnn-nnnn");
                                                              });
                                                              
                                                              1. Александр
                                                                Александр
                                                                22.02.2016, 15:03
                                                                Спасибо.
                                                            Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.