Вопрос:

Автоформат номера телефона в Jquery

javascript jquery

62081 просмотра

5 ответа

143 Репутация автора

У меня есть одно текстовое поле для номера телефона. Мой номер телефона должен быть 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/

Автор: Senthil Sivaramakrishnan Источник Размещён: 07.06.2012 11:24

Ответы (5)


29 плюса

29064 Репутация автора

Решение

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

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

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

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

HTML:

<input id="ssn"/>

JavaScript:

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

ОБНОВЛЕНИЕ :

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

Автор: LeftyX Размещён: 07.06.2012 11:34

7 плюса

60401 Репутация автора

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

$('#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">

Еще немного о регулярном выражении /(\d{3})\-?/g:
это заменяет собой группу из 3 цифр, за которой следует тире. Скобки создают обратную ссылку на совпадающие цифры, которая используется в строке замены ( $1--> $ 1 является обратной ссылкой).
Обратите внимание, что дополнительный тире тоже заменен, но не включен в обратную ссылку. если вход 123и заменить шаблон будет что - то вроде /(\d{3})/g, или /(\d{3}\-?)/gзначение стало бы 123-4, 123--45, 123---456и так далее, удваивая черточки каждый раз.

Предупреждение :
это доставит пользователю некоторое горе, поскольку клавиши со стрелками и тому подобное не будут работать. К счастью, это легко исправить: просто добавьте следующий код в верхней части своей функции:

if (e.keyCode > 36 && e.keyCode < 41)
{
    return true;
}

И стрелки работают просто отлично. для других клавиш (таких как delete, backspace, shift и т. д.) проверьте эту страницу .

Для полного примера: вот скрипка

Автор: Elias Van Ootegem Размещён: 07.06.2012 12:26

-2 плюса

1 Репутация автора

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

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: Затем код скрипта вставляется в тэг скрипта.

$ (документ) .ready (функция ($) {

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

});

Автор: Musharib Khan Размещён: 09.02.2016 09:52

-1 плюса

1 Репутация автора

$('#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"/>

Автор: Rahul Vij Размещён: 13.11.2017 11:33

0 плюса

10119 Репутация автора

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

проблема

Я хотел бы, чтобы в поле ввода html моего номера телефона автоматически форматировалось (маскировалось) значение при вводе пользователем.

Решение

Проверьте Cleave.js . Это очень мощный / гибкий и простой способ решения этой проблемы и многих других проблем с маскировкой данных.

Форматировать номер телефона так же просто, как:

var cleave = new Cleave('.input-element', {
    phone: true,
    phoneRegionCode: 'US'
});
Автор: Tod Birdsall Размещён: 17.08.2018 05:26
Вопросы из категории :
32x32