使用纯JavaScript将用户键入的电话号码格式化

Question

我的文档正文中有一个输入字段,我需要在用户输入时对其进行格式化.它应该在区号周围加上括号,然后在三位和四位之间加一个短划线.

例如: (123) 456 - 7890

在用户输入时,它应该类似于:

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

Answer 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/

Answer 2

我研究了这里的各种解决方案并提出了这个，我认为这是简短、甜蜜且简单的。如果删除内部数字，它仍然会将光标留在末尾，但其他方面工作正常。这就是我来这里寻找的解决方案，也是我认为OP想要的。

超文本标记语言

<input  id="phone" onInput="this.value = phoneFormat(this.value)"/>

JavaScript

function phoneFormat(input) {//returns (###) ###-####
    input = input.replace(/\D/g,'').substring(0,10); //Strip everything but 1st 10 digits
    var size = input.length;
    if (size>0) {input="("+input}
    if (size>3) {input=input.slice(0,4)+") "+input.slice(4)}
    if (size>6) {input=input.slice(0,9)+"-" +input.slice(9)}
    return input;
}

更新 我找到了一种让它变得更整洁的方法：

JavaScript

function phoneFormat(input) {//returns (###) ###-####
    input = input.replace(/\D/g,'');
    var size = input.length;
    if (size>0) {input="("+input}
    if (size>3) {input=input.slice(0,4)+") "+input.slice(4,11)}
    if (size>6) {input=input.slice(0,9)+"-" +input.slice(9)}
    return input;
}

Answer 3

我不喜欢切片的东西。我建议使用 .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 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;
});