JQuery или Javascript для Автоформата телефона маска

Question

У меня есть Rails приложение, которое я запись в text_field как string, который является телефонный номер, который я хотел бы автоматически отформатирован в следующей маске xxx-xxx-xxxx

Я искал Переполнение стека и нашло это auto-format-phone-number-in-jquery но OP смотрел форматировать маску xxx-xxx-xxx и мне нужно, чтобы выяснить, как сделать маску xxx-xxx-xxxx

Я позаимствовал отрезал от этого ответа, и это делает работу, но снова форматов as xxx-xxx-xxxx

$(function(){ 
    $('#call_caller_phone').keyup(function() 
    { 
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-'); 
    }); 
}); 

Может ли кто-нибудь помочь мне с форматированием в маске xxx-xxx-xxxx?

Answer 1

Я написал пользовательский JQuery код, пожалуйста, проверьте ниже фрагмент кода

$("#yourphone").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) { 
      $(this).val(curval + "-"); 
     } else if (curchr == 7) { 
      $(this).val(curval + "-"); 
     } 
     $(this).attr('maxlength', '12'); 
    }); 

Рабочая скрипку Пример https://jsfiddle.net/o2gxgz9r/11639/

Answer 2

function phoneMask() { 
    num = $(this).val().replace(/\D/g,''); 
    $(this).val(num.substring(0,3) + '-' + num.substring(3,6) + '-' + num.substring(6,10)); 
} 
$('[type="tel"]').keyup(phonemask) 

Как это работает: взять номер телефона, избавиться от любых нечисловых символов. Затем возьмите первые 3 числа, добавьте тире, возьмите следующие три, добавьте тире и возьмите следующие четыре.

Я изменил селектор на [type="tel"], потому что вы должны установить тип ввода tel для телефонных номеров, а затем эта функция применит его ко всем входам телефонного номера. Но если это вам не подходит, замените его на #call_caller_phone

Answer 3

Я считаю, что это может сработать.

$(function(){ 
 
    $('#call_caller_phone').keyup(function() 
 
    { 
 
    this.value = this.value.replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'); 
 
    //alert ("OK"); 
 
    }); 
 
});

#call_caller_phone { 
 
    color: #fff; 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="call_caller_phone" type="text">

Answer 4

Это позволит только числовой ввод в текстовое поле (и «-'s) и только позволяют 10 цифр (плюс 2» -'s) для телефонных номеров в стиле США , Он также вставляет тире, как и пользователь. Возможно, стоит посмотреть на то, чтобы сделать все это в конце. Но есть хорошие библиотеки jquery для обработки входных масок, а также masked input plugin.

$('#phone').keyup(function(ev) { 
 
    var key = ev.which; 
 
    if (key < 48 || key > 57 || key != 45) { 
 
    ev.preventDefault(); 
 
    } 
 

 
    if (this.value.length > 12) { 
 
    this.value = this.value.slice(0, -1); 
 
    return; 
 
    } 
 

 
    this.value = this.value.replace(/^(\d{3})(\d)/, '$1-$2') 
 
    .replace(/^(\d{3}-\d{3})(\d)/, '$1-$2'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id='phone' />