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

Question

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

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

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

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

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

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

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

(___) ___-____

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

Например [phone],

Answer 1

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

$(document).ready(function() {
  $("#phone").inputmask("mask", {
    "mask": "(999)999-999"
  });
  var i = 0;
  $('.plus-button').click(function() {
    if (i === 0) {
      $("#phone").inputmask("mask", {
        "mask": "[phone]"
      });
      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>

Answer 2

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

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

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

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

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

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

$("#phone").keyup(function(x){
   var plus = $(x.target).val();
   if (plus[0] == '+')
        $(x.target).mask("\[phone]")
   else
        $(x.target).mask("999 999-9999")  
})

Answer 3

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

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

JS Fiddle Link: 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': ['[phone]']" 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']"

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

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