JavaScript电话号码自动转换无法工作

Question

我有一些像下面这样的javascript代码

function mask(eventVal,val){
    var len = val.value.length;
    var key = whichKey(eventVal);
    if(key>47 && key<58)
    {   
        if( len==0 )val.value=val.value+'('
        else if( len==4 )val.value=val.value+') '
        else if(len==9 )val.value=val.value+'-'
        else val.value=val.value;
    }
    else{
        val.value = val.value.replace(/[^0-9-]/,'')
        val.value = val.value.replace('--','-')
    }
}

function whichKey(eventVal) {
    var code;
    if (!eventVal) var eventVal = window.event;
    if (eventVal.keyCode) code = eventVal.keyCode;
    else if (eventVal.which) code = eventVal.which;
    return code;
}

HTML

<input type="text" name="PhoneNumber" id="PhoneNumber" value="" onkeydown="mask(event,this)"/>

当我输入电话号码时，如1234567890，在自动转换为（123）456-7890时一切正常。但是，当我尝试删除末尾的0时，格式就完全被破坏了，例如123）456-789，甚至在我点击其他地方时也会被破坏。有人能帮我解决这个问题吗？

- Soumya

---

问题在于退格键和其他非数字字符将进入您的else路径，该路径执行替换以删除先前添加的括号。此外，您可能希望使用onkeyup而不是onkeydown，以便您使用刚刚键入的字符之后的值。无论如何，这里有一个演示供人们玩耍：http://jsfiddle.net/weSvU/ - nnnnnn

请注意，因为您在if测试中使用的是_key_代码而不是字符代码，所以它无法处理通过数字键盘输入的字符（在我的国家键盘上，1和！具有相同的键码，2和@具有相同的键码等等）。我建议您在onblur上进行处理，这样您就不必处理用户尝试在字符串中间进行编辑等问题。当他们离开字段时，只需重新格式化整个字符串即可... - nnnnnn

你的代码没有起作用。 - Soumya

我发布的Fiddle是_你的_代码，供大家玩耍。这是我想出的一个更好的方法：http://jsfiddle.net/weSvU/1/ （代码更短，但仍然无法真正处理用户编辑先前输入的值）。 - nnnnnn

Answer 1

请检查这段脚本。

<script language="javascript">
var zChar = new Array(' ', '(', ')', '-', '.');
var maxphonelength = 14;
var phonevalue1;
var phonevalue2;
var cursorposition;
function ParseForNumber1(object){
  phonevalue1 = ParseChar(object.value, zChar);
}
function ParseForNumber2(object){
  phonevalue2 = ParseChar(object.value, zChar);
}
function up(object,e) { 
  if(e){ 
    e = e 
  } else {
    e = window.event 
  } 
  if(e.which){ 
    var keycode = e.which 
  } else {
    var keycode = e.keyCode 
  }
  ParseForNumber1(object)
  if(keycode >= 48){
    ValidatePhone(object)
  }
}
function down(object,e) { 
  if(e){ 
    e = e 
  } else {
    e = window.event 
  } 
  if(e.which){ 
    var keycode = e.which 
  } else {
    var keycode = e.keyCode 
  }
  ParseForNumber2(object)
} 
function GetCursorPosition(){
  var t1 = phonevalue1;
  var t2 = phonevalue2;
  var bool = false
  for (i=0; i<t1.length; i++)
  {
    if (t1.substring(i,1) != t2.substring(i,1)) {
      if(!bool) {
        cursorposition=i
        window.status=cursorposition
        bool=true
      }
    }
  }
}
function ValidatePhone(object){
  var p = phonevalue1
  p = p.replace(/[^\d]*/gi,"")
  if (p.length < 3) {
    object.value=p
  } else if(p.length==3){
    pp=p;
    d4=p.indexOf('(')
    d5=p.indexOf(')')
    if(d4==-1){
      pp="("+pp;
    }
    if(d5==-1){
      pp=pp+")";
    }
    object.value = pp;
  } else if(p.length>3 && p.length < 7){
    p ="(" + p; 
    l30=p.length;
    p30=p.substring(0,4);
    p30=p30+") " 
    p31=p.substring(4,l30);
    pp=p30+p31;
    object.value = pp; 
  } else if(p.length >= 7){
    p ="(" + p; 
    l30=p.length;
    p30=p.substring(0,4);
    p30=p30+") " 

    p31=p.substring(4,l30);
    pp=p30+p31;

    l40 = pp.length;
    p40 = pp.substring(0,9);
    p40 = p40 + "-"

    p41 = pp.substring(9,l40);
    ppp = p40 + p41;

    object.value = ppp.substring(0, maxphonelength);
  }
  GetCursorPosition()
  if(cursorposition >= 0){
    if (cursorposition == 0) {
      cursorposition = 2
    } else if (cursorposition <= 2) {
      cursorposition = cursorposition + 1
    } else if (cursorposition <= 4) {
      cursorposition = cursorposition + 3
    } else if (cursorposition == 5) {
      cursorposition = cursorposition + 3
    } else if (cursorposition == 6) { 
      cursorposition = cursorposition + 3 
    } else if (cursorposition == 7) { 
      cursorposition = cursorposition + 4 
    } else if (cursorposition == 8) { 
      cursorposition = cursorposition + 4
      e1=object.value.indexOf(')')
      e2=object.value.indexOf('-')
      if (e1>-1 && e2>-1){
        if (e2-e1 == 4) {
          cursorposition = cursorposition - 1
        }
      }
    } else if (cursorposition == 9) {
      cursorposition = cursorposition + 4
    } else if (cursorposition < 11) {
      cursorposition = cursorposition + 3
    } else if (cursorposition == 11) {
      cursorposition = cursorposition + 1
    } else if (cursorposition == 12) {
      cursorposition = cursorposition + 1
    } else if (cursorposition >= 13) {
      cursorposition = cursorposition
    }

    var txtRange = object.createTextRange();
    txtRange.moveStart( "character", cursorposition);
    txtRange.moveEnd( "character", cursorposition - object.value.length);
    txtRange.select();
  }

}

function ParseChar(sStr, sChar)
{
  if (sChar.length == null) 
  {
    zChar = new Array(sChar);
  }
    else zChar = sChar;
  for (i=0; i<zChar.length; i++)
  {
    sNewStr = "";
    var iStart = 0;
    var iEnd = sStr.indexOf(sChar[i]);
    while (iEnd != -1)
    {
      sNewStr += sStr.substring(iStart, iEnd);
      iStart = iEnd + 1;
      iEnd = sStr.indexOf(sChar[i], iStart);
    }
    sNewStr += sStr.substring(sStr.lastIndexOf(sChar[i]) + 1, sStr.length);
    sStr = sNewStr;
  }
  return sNewStr;
}
</script>

HTML:

<input type="text" name="txtInput" onkeydown="javascript:down(this,event);" onkeyup="javascript:up(this,event);">

- Wiram Rathod

---

如果您编辑先前输入的值，例如删除括号之间已有的数字，则此方法将无效。至少在Chrome浏览器中是如此：http://jsfiddle.net/pZKPS/ - nnnnnn

Answer 2

你可以尝试使用以下代码来替换你的最后一位数字。

<script type="text/javascript">
function fnc()
{

    str=document.getElementById("atext").value;
    x=(str.match(pattern));
    if(x!="")
    {str=str.replace(/[0-9]$/g,'')}
    alert(str);
}

</script>
<body>
  <input type="text" id="atext">
  <input type="button" onClick="fnc()">
</body>

- polin