Отформатируйте номер телефона как пользовательский тип с использованием чистого JavaScript

Question

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

Ex: (123) 456 - 7890

В пользовательских типов он должен выглядеть примерно так:

(12
(123)
(123) 456
(123) 456 - 78
(123) 456 - 7890

Answer 1

Вы можете сделать это, используя быстрый JavaScriptфункция.

Если ваш HTML выглядит следующим образом:
<input type="text" id="phoneNumber"/>

Ваша функция JavaScript может быть просто:

// A function to format text to look like a phone number 
function phoneFormat(input){ 
     // Strip all characters from the input except digits 
     input = input.replace(/\D/g,''); 

     // Trim the remaining input to ten characters, to preserve phone number format 
     input = input.substring(0,10); 

     // Based upon the length of the string, we add formatting as necessary 
     var size = input.length; 
     if(size == 0){ 
       input = input; 
     }else if(size < 4){ 
       input = '('+input; 
     }else if(size < 7){ 
       input = '('+input.substring(0,3)+') '+input.substring(3,6); 
     }else{ 
       input = '('+input.substring(0,3)+') '+input.substring(3,6)+' - '+input.substring(6,10); 
     } 
     return input; 
} 

Конечно, вы будете нуждаться в прослушиватель событий:

document.getElementById('phoneNumber').addEventListener('keyup',function(evt){ 
     var phoneNumber = document.getElementById('phoneNumber'); 
     var charCode = (evt.which) ? evt.which : evt.keyCode; 
     phoneNumber.value = phoneFormat(phoneNumber.value); 
}); 

И если вы не сохраните телефонные номера в виде отформатированных строк (я не рекомендую это делать), вы захотите очистить нечисловой символ актеры перед отправкой значение что-то вроде:
document.getElementById('phoneNumber').value.replace(/\D/g,'');

Если вы хотите, чтобы увидеть это в действии с бонусом фильтрации входных данных, проверить эту скрипку:
http://jsfiddle.net/rm9vg16m/

Answer 2

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

var phoneNumber = "1234567899"; 

var formatted = phoneNumber.replace(/(\d{1,2})(\d{1})?(\d{1,3})?(\d{1,4})?/, function(_, p1, p2, p3, p4){ 
    let output = "" 
    if (p1) output = `(${p1}`; 
    if (p2) output += `${p2})`; 
    if (p3) output += ` ${p3}` 
    if (p4) output += ` ${p4}` 
    return output; 
}); 

Примечание: Я не добавил каких-либо пробелов, не номер вскрыши, но вы можете добавить, что, как хорошо.

Answer 3

Чтобы добавить некоторую дополнительную легкость для пользователя, я бы фактически обновил строку, чтобы автоматически включать «)» или «-», когда пользователь достигает определенных символов, чтобы они не добавляли, скажем, две тире. (555) 555--5555

if(size === 0) { 
    input = input; 
} 
else if (size === 3) { 
    input = '('+input.substring(0,3)+') ' 
} 
else if (size < 4) { 
    input = '('+input; 
} 
else if (size === 6) { 
    input = '('+input.substring(0,3)+') '+input.substring(3,6)+' -'; 
} 
else if (size > 6) { 
    input = '('+input.substring(0,3)+') '+input.substring(3,6)+' - '+input.substring(6,10); 
} 
return input 

Answer 4

Ранее ответы не считают, что происходит, когда пользователь совершает ошибку и удаляет некоторые из введенных цифр.

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

$('#phone').keyup(function(e){ 
    var ph = this.value.replace(/\D/g,'').substring(0,10); 
    // Backspace and Delete keys 
    var deleteKey = (e.keyCode == 8 || e.keyCode == 46); 
    var len = ph.length; 
    if(len==0){ 
     ph=ph; 
    }else if(len<3){ 
     ph='('+ph; 
    }else if(len==3){ 
     ph = '('+ph + (deleteKey ? '' : ') '); 
    }else if(len<6){ 
     ph='('+ph.substring(0,3)+') '+ph.substring(3,6); 
    }else if(len==6){ 
     ph='('+ph.substring(0,3)+') '+ph.substring(3,6)+ (deleteKey ? '' : '-'); 
    }else{ 
     ph='('+ph.substring(0,3)+') '+ph.substring(3,6)+'-'+ph.substring(6,10); 
    } 
    this.value = ph; 
});