Ответ 1
Новый ответ ES6
Вы все еще можете сделать это, используя простой JavaScript.
HTML
<input id="phoneNumber" maxlength="16"/>
JavaScript (ES6)
const isNumericInput = (event) => {
const key = event.keyCode;
return ((key >= 48 && key <= 57) || // Allow number line
(key >= 96 && key <= 105) // Allow number pad
);
};
const isModifierKey = (event) => {
const key = event.keyCode;
return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
(key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
(key > 36 && key < 41) || // Allow left, up, right, down
(
// Allow Ctrl/Command + A,C,V,X,Z
(event.ctrlKey === true || event.metaKey === true) &&
(key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
)
};
const enforceFormat = (event) => {
// Input must be of a valid number format or a modifier key, and not longer than ten digits
if(!isNumericInput(event) && !isModifierKey(event)){
event.preventDefault();
}
};
const formatToPhone = (event) => {
if(isModifierKey(event)) {return;}
// I am lazy and don't like to type things more than once
const target = event.target;
const input = target.value.replace(/\D/g,'').substring(0,10); // First ten digits of input only
const zip = input.substring(0,3);
const middle = input.substring(3,6);
const last = input.substring(6,10);
if(input.length > 6){target.value = '(${zip}) ${middle} - ${last}';}
else if(input.length > 3){target.value = '(${zip}) ${middle}';}
else if(input.length > 0){target.value = '(${zip}';}
};
const inputElement = document.getElementById('phoneNumber');
inputElement.addEventListener('keydown',enforceFormat);
inputElement.addEventListener('keyup',formatToPhone);
И если вы хотите возиться с этим:
https://jsfiddle.net/rafj3md0/
Отказ от ответственности:
Стоит отметить, что это немного странно, если вы пытаетесь изменить середину числа из-за того, как браузеры обрабатывают размещение в каратах после установки значения элемента. Решение этой проблемы выполнимо, но потребовало бы больше времени, чем у меня сейчас, и есть библиотеки, которые обрабатывают подобные вещи.
Старый ES5 Ответ
Вы можете сделать это с помощью быстрой функции 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/