Как изменить формат номера телефона при вводе?

Question

Как изменить формат номера телефона при вводе?

Вот мой текущий: CodePen , сотовый телефон - это поле ввода, где я пытаюсь это сделать. Рабочий телефон является примером функциональности по умолчанию плагина ввода маски .

Как бы вы справились с этой проблемой?

jQuery для поля ввода сотового телефона:

case '2':
    console.log('created phone input');
    $('.new_option').append(myphone);
    $('.added_mobilephone').mask('(999) 999-9999? 9');
    $('.added_mobilephone').keypress(function(event){

      if (this.value.trim().length > 10) {
        console.log('this.value = '+this.value.trim());
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }

      /*if (this.value.length < 9) {
        console.log(this.value);
        console.log('less then 10');
        $('.added_mobilephone').mask('(999) 999-9999? 9999999999');
      } else if (this.value.length > 9) {
        console.log(this.value);
        console.log('greater then 10');
        $('.added_mobilephone').mask('99999999999999999999');
      }*/
    });
    break;

716

21 принят

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

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

Вот сценарий для демонстрации предыдущего заявления:

$(window).load(function()
{
   var phones = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];
    $('#textbox').inputmask({ 
        mask: phones, 
        greedy: false, 
        definitions: { '#': { validator: "[0-9]", cardinality: 1}} });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<input type='text' id='textbox' />

ов за 24

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(d{3})(d{3})(d)+$/, "($1)$2-$3"));
});

Это будет работать наверняка :)

12 ов

Это было очень полезно, я добавляю только некоторый код, чтобы заставить его работать, когда пользователь удаляет несколько символов, я дал возможность вводить только числа и максимальную длину. Это работает для меня :)

$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="phone-format"  type="text" placeholder="Phone Number">

1

В твоем случае

<input type="text" class="form-control" data-mask="(999) 999-9999">

с Jasny начальной загрузки плагин

Демонстрация в скрипке

0

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

Не требует никаких плагинов -> просто JS и JQuery
Фильтрует вне цифры (т.е. шум) автоматически
Сдвиги оставили цифры номера телефона при удалении цифр
Поддерживает формат / не разбивается на удаление
Ничего не происходит, если ничего не меняется, например, позволяет курсору перемещаться влево / вправо, чтобы сделать изменение по сравнению с другими решениями, которые привязывали курсор к концу

CAVEAT: Рассматриваемый номер телефона - это только Северная Америка, что было хорошо в моем случае, поскольку это было использовано для регистрации в местном сообществе в Канаде.

$("input[name='phone_num']").keyup(function() {
  var val_old = $(this).val();
  var val = val_old.replace(/D/g, '');
  var len = val.length;
  if (len >= 1)
    val = '(' + val.substring(0);
  if (len >= 3)
    val = val.substring(0, 4) + ') ' + val.substring(4);
  if (len >= 6)
    val = val.substring(0, 9) + '-' + val.substring(9);
  if (val != val_old)
    $(this).focus().val('').val(val);
});

JQuery, ввод, форматирование, телефонный номер, maskedinput,

jquery,input,formatting,phone-number,maskedinput,

16

Ответов: 7