Question

我有一个带有JavaScript代码的html页面，用于在用户输入时自动设置电话号码格式“（xxx）xxx-xxxx”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
/*Start of phone number formating */
var n;
var p;
var p1;
function format_phone(){
p=p1.value
if(p.length==3){
    pp=p;
    d4=p.indexOf('(')
    d5=p.indexOf(')')
    if(d4==-1){
        pp="("+pp;
    }
    if(d5==-1){
        pp=pp+")";
    }
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
}
if(p.length>3){
    d1=p.indexOf('(')
    d2=p.indexOf(')')
    if (d2==-1){
        l30=p.length;
        p30=p.substring(0,4);
        p30=p30+")"
        p31=p.substring(4,l30);
        pp=p30+p31;
        document.form4.phone_number.value="";
        document.form4.phone_number.value=pp;
    }
    }
if(p.length>5){
    p11=p.substring(d1+1,d2);
    if(p11.length>3){
    p12=p11;
    l12=p12.length;
    l15=p.length
    p13=p11.substring(0,3);
    p14=p11.substring(3,l12);
    p15=p.substring(d2+1,l15);
    document.form4.phone_number.value="";
    pp="("+p13+")"+p14+p15;
    document.form4.phone_number.value=pp;
    }
    l16=p.length;
    p16=p.substring(d2+1,l16);
    l17=p16.length;
    if(l17>3&&p16.indexOf('-')==-1){
        p17=p.substring(d2+1,d2+4);
        p18=p.substring(d2+4,l16);
        p19=p.substring(0,d2+1);
    pp=p19+p17+"-"+p18;
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
    }
}

setTimeout(format_phone,100)
}
function getIt(m){
    n=m.name;
    p1=m
    format_phone()
}
/* End of phone number formating */

</script>

</head>

<body>
<form id="form4" name="form4" method="post" action="" onSubmit="return validation();">
<input name="phone_number" type="text" id="phone_number" style="float:left; margin-left:20px;"  align="top" value="Phone Number" 
    onFocus="if(this.value==this.defaultValue)this.value='';" maxlength="13" onclick="javascript:getIt(this)"/>
    </form>
</body>
</html>

我需要修改脚本，以便自动排列数字 “（xxx）xxx-xxxx”

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
/*Start of phone number formating */
var n;
var p;
var p1;
function format_phone(){
p=p1.value
if(p.length==3){
    pp=p;
    d4=p.indexOf('(')
    d5=p.indexOf(')')
    if(d4==-1){
        pp="("+pp;
    }
    if(d5==-1){
        pp=pp+") ";
    }
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
}
if(p.length>3){
    d1=p.indexOf('(')
    d2=p.indexOf(')')
    if (d2==-1){
        l30=p.length;
        p30=p.substring(0,4);
        p30=p30+") "
        p31=p.substring(5,l30);
        pp=p30+p31;
        document.form4.phone_number.value="";
        document.form4.phone_number.value=pp;
    }
    }
if(p.length>7){
    p11=p.substring(d1+1,d2);
    if(p11.length>4){
    p12=p11;
    l12=p12.length;
    l15=p.length
    p13=p11.substring(0,4);
    p14=p11.substring(4,l12);
    p15=p.substring(d2+1,l15);
    document.form4.phone_number.value="";
    pp="("+p13+") "+p14+p15;
    document.form4.phone_number.value=pp;
    }
    l16=p.length;
    p16=p.substring(d2+2,l16);
    l17=p16.length;
    if(l17>3&&p16.indexOf('-')==-1){
        p17=p.substring(d2+1,d2+5);
        p18=p.substring(d2+5,l16);
        p19=p.substring(0,d2+1);
    pp=p19+p17+"-"+p18;
    document.form4.phone_number.value="";
    document.form4.phone_number.value=pp;
    }
}

setTimeout(format_phone,100)
}
function getIt(m){
    n=m.name;
    p1=m
    format_phone()
}
/* End of phone number formating */

</script>

</head>

<body>
<form id="form4" name="form4" method="post" action="" onSubmit="return validation();">
<input name="phone_number" type="text" id="phone_number" style="float:left; margin-left:20px;"  align="top" value="Phone Number" 
    onFocus="if(this.value==this.defaultValue)this.value='';" maxlength="14" onclick="javascript:getIt(this)"/>
    </form>
</body>
</html>

Answer 2

~~只需CTRL+F并将")"替换为") "。~~

虽然看起来不是很好的代码。我建议看一下Masked Input插件：

http://digitalbush.com/projects/masked-input-plugin/

Answer 3

这个功能对我有用。它返回以下格式：（XXX）XXX-XXXX

<input type="text" id="phone" onkeyup="GetPhoneFormat('phone')">

<script>
function GetPhoneFormat(id) {
var str = document.getElementById(id).value;
if (str.length == 3) {
var ind = str.substring(0, 3);
document.getElementById(id).value = '('+ind+')';
}
if (str.length == 8) {
var ind = str.substring(0, 8);
document.getElementById(id).value = ind+'-';
}
}
</script>

Answer 4

PhoneFormat.com有一个javascript库，可以处理格式化，并且附加到文本框的一些onkeyup事件将为您提供一个非常好的解决方案。

自动设置美国电话号码格式

4 个答案: