Принятие двух разных форматов телефонных номеров с помощью плагина jQuery MaskedInput

У меня есть следующие правила для ввода данных номера телефона:

  • Для телефонов в США он должен соответствовать формату (999) 999-9999.
  • Для телефонов за пределами США он должен начинаться с +, за которым следует любая комбинация цифр, дефисов и пробелов (в основном, гораздо менее строгий, чем формат США).

У меня есть проверка регулярным выражением, которая гарантирует, что введенный номер телефона соответствует этим правилам. Я хочу использовать маску формата телефона, соответствующую приведенным выше правилам.

Например, простой случай, когда я просто разрешаю определенный формат США, я могу сделать:

<label for="phone">Enter Phone Number:</label>
<input type="text" id="phone" name="phone">

<script type="text/javascript">
    $(function () {
        $('.usa-phone').mask("(999) 999-9999");
    });
</script>

Это будет отображать что-то подобное в текстовом поле, когда пользователь нажимает, чтобы сфокусировать текстовое поле телефона:

(___) ___-____

Но как мне тогда разрешить международные телефоны, которые начинаются со знака «+» в том же поле ввода?

Например +99 (99) 9999-9999.


jquery maskedinput
person Jiveman    schedule 26.12.2016    source источник
comment
Проверьте это, может помочь что угодно github.com/andr-04/inputmask-multi   -  person vijaykumar    schedule 29.12.2016
comment
Плагин jQuery MaskedInput не поддерживает эту функцию, вместо этого вы должны использовать другой плагин   -  person Chiu    schedule 05.01.2017

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете добавить кнопку, которая переключается между двумя масками. Например:

$(document).ready(function() {
  $("#phone").inputmask("mask", {
    "mask": "(999)999-999"
  });
  var i = 0;
  $('.plus-button').click(function() {
    if (i === 0) {
      $("#phone").inputmask("mask", {
        "mask": "+99 (99) 9999-9999"
      });
      i = 1;
    } else {
      $("#phone").inputmask("mask", {
        "mask": "(999)999-999"
      });
      i = 0;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<label for="phone">Enter Phone Number:
  <button type="button" class="plus-button">+</button>
</label>
<input type="text" id="phone" name="phone" data-mask>

person Kramb    schedule 04.01.2017
comment
Это похоже на маршрут, который я выбрал. Я устанавливаю международный флажок, который, если он установлен, меняет маски местами. Казалось бы, достаточно разумный способ сделать это. - person Jiveman; 04.01.2017

arrow_upward
1
arrow_downward

Для этого есть несколько решений, в том числе возможность выбора пользователем из раскрывающегося списка страны, в которой он находится, чтобы вы могли соответствующим образом настроить формат. Второй способ заключается в перехвате отдельных нажатий клавиш пользователя, а затем изменении формата при наборе +44 или +39 для представления британского или итальянского числового формата.

Есть несколько пакетов, которые реализуют это, и, поскольку есть сотни стран, многие из которых имеют более одного или двух форматов в каждой стране, вам, вероятно, не следует пытаться реализовать это самостоятельно, а вместо этого использовать один из этих пакетов.

Я думаю, что использовал это здесь: https://github.com/albeebe/phoneformat.js в более раннем проекте.

Поскольку вы ищете решение Jquery, библиотека Stripe выглядит многообещающе https://github.com/stripe/jquery.mobilePhoneNumber

Если вы в порядке, создавая небольшой код самостоятельно, вы можете комбинировать обработку клавиатуры, описанную здесь Как изменить формат номера телефона при вводе? с помощью основного кода из любой из других библиотек

Таким образом, чтобы сильно упростить логику, вы должны динамически изменить формат файла на основе входных данных в событии keyup, например

$("#phone").keyup(function(x){
   var plus = $(x.target).val();
   if (plus[0] == '+')
        $(x.target).mask("\+99 9999999999")
   else
        $(x.target).mask("999 999-9999")  
})
person Soren    schedule 29.12.2016
comment
Спасибо вам за помощь. Это не совсем ответило на мой вопрос, но помогло мне двигаться в правильном направлении. Предоставленный вами пример кода был полезен, но не совсем работает. Если функция mask(...) повторно выполняется при каждом нажатии клавиши, кажется, что она не позволяет нормально вводить все цифры, только первую, потому что маска постоянно сбрасывается. - person Jiveman; 02.01.2017

arrow_upward
-1
arrow_downward

Вы можете использовать приведенную ниже опцию маски для достижения того, что вы упомянули, т.е. +99 (99) 9999-9999 data-inputmask="'mask': ['+99 (99) 9999-9999']"

Вы можете использовать вышеуказанную опцию вместе с вашим элементом ввода. Я создал скрипку для этого.

Ссылка на скрипт JS:https://jsfiddle.net/5yh8q6xn/1/

HTML-код:

<div class="form-group">
    <label>Intl US phone mask:</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-phone"></i>
        </div>
        <input id="intl" type="text" class="form-control" data-inputmask="'mask': ['+99 (99) 9999-9999']" data-mask>
        <!--'999-999-9999 [x99999]',   -->
    </div>
    <!-- /.input group -->
</div>

JS-код:

$(function(){
 $("[data-mask]").inputmask(); 
});

Другие параметры Вы также можете добавить 0 в маску ввода, так как некоторые пользователи предпочитают добавлять префикс 0 в контактном номере вместе с +. Чтобы добавить 0 вместе с вашим номером, просто замените приведенный ниже элемент ввода.

data-inputmask="'mask': ['+099 (99) 9999-9999']"

Точно так же для разных входных данных (из разных стран) вы можете соответствующим образом замаскировать свой ввод.

Надеюсь, это то, что вы искали!

person Jestino Sam    schedule 03.01.2017
comment
Не уверен, что следую. Как это позволяет вводить два разных формата? Один из них (123) 456-7890, а другой +, за которым следует любой неамериканский номер? - person Jiveman; 04.01.2017
comment
У вас может быть два поля ввода; один принимает формат США, а другой — для международных номеров. Вы хотите, чтобы ввод был замаскирован с помощью одного поля ввода? - person Jestino Sam; 04.01.2017
comment
Да, это было моим первоначальным намерением. - person Jiveman; 04.01.2017