Автоматический формат номера телефона в JQuery

У меня есть одно текстовое поле для номера телефона. Мой номер телефона должен быть XXX-XXX-XXX, как этот формат.

Я получил решение для формата XXX-XXX-XXX, но я не знаю, как изменить этот код.

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    while (val.length > 3) {
      newVal += val.substr(0, 3) + '-';
      val = val.substr(3);
    }
    newVal += val;
    this.value = newVal;
});

http://jsfiddle.net/ssthil/nY2QT/

Ответы

Ответ 1

Поскольку вы используете jQuery, вы можете попробовать jquery masked-input-plugin.

Там jsFiddle для вас здесь, где вы можете увидеть, как это работает.

Исходный код проекта на GitHub можно найти здесь.

Реализация более чем простая:

HTML:

<input id="ssn"/>

JavaScript:

$("#ssn").mask("999-999-999");

ОБНОВЛЕНИЕ:

Еще один хороший один можно найти здесь.

Ответ 2

Насколько я могу судить, все, что вам действительно нужно сделать, это:

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

но это будет работать только тогда, когда люди вводят цифры, поэтому я предлагаю ввести дополнительную проверку:

$('#ssn').keyup(function(e) {
  if ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode < 106 && e.keyCode > 95)) {
    this.value = this.value.replace(/(\d{3})\-?/g, '$1-');
    return true;
  }
  
  //remove all chars, except dash and digits
  this.value = this.value.replace(/[^\-0-9]/g, '');
});

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

Ответ 3

$('#ssn').keyup(function() {
        var val = this.value.replace(/\D/g, '');
        var newVal = '';
        for(i=0;i<2;i++){
         if (val.length > 3) {
          newVal += val.substr(0, 3) + '-';
          val = val.substr(3);
        }
        }
        newVal += val;
        this.value = newVal;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ssn" maxlength="10"/>

Ответ 4

Вы можете установить маску ввода в любом поле тремя простыми шагами:

1: Прежде всего вызовите эти библиотеки http://code.jquery.com/jquery-1.7.2.min.js "" https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js "

2: Создайте простую форму следующим образом:

<form> <input type="text" name="phone" id="phone" /> </form>

3: Затем код сценария прошёл в ваш тег скрипта.

$ (document).ready(function ($) {

$('#phone').mask("99999-9999999-9",{placeholder:""});

});