使用Javascript格式化多個asp：TextBox的電話號碼

Question

這可能是非常基本的問題。我發現類似的解決方案堆棧溢出格式化的電話號碼，我用它的asp：TextBox控制，但我希望這個代碼工作多個電話號碼文本框控制，而不是直接傳遞ID。我有五個不同的手機領域，所有這些文本框都是asp：TextBox。我想從所有提交的代碼中調用相同的代碼。 （我期待在JavaScript這個解決方案只）

這裏是我的JS代碼：

/*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.getElementById('<%=HomePhone.ClientID%>').value = ""; 
      document.getElementById('<%=HomePhone.ClientID%>').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.getElementById('<%=HomePhone.ClientID%>').value = ""; 
       document.getElementById('<%=HomePhone.ClientID%>').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.getElementById('<%=HomePhone.ClientID%>').value = ""; 
       pp = "(" + p13 + ") " + p14 + p15; 
       document.getElementById('<%=HomePhone.ClientID%>').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.getElementById('<%=HomePhone.ClientID%>').value = ""; 
       document.getElementById('<%=HomePhone.ClientID%>').value = pp; 
      } 
     } 

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

和asp:TextBox作爲

<asp:TextBox MaxLength="14" 
          runat="server" ID="HomePhone" 
          placeholder="(xxx) xxx-xxxx" 
          onFocus="if(this.value==this.defaultValue)this.value='';" onclick="javascript:getIt(this)" 
          onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> 

而且我有其他類似的4個文本框的手機領域，我想爲所有這些使用相同的格式化邏輯。從多個文本框中使用這個或任何其他JavaScript代碼的最佳方式是什麼？任何幫助將不勝感激。

Answer 1

我不記得在那裏我發現這個解決方案，但它可能會幫助你出去格式化手機領域：

<script type="text/javascript"> 
    //Phone validation 
    var zChar = new Array(' ', '(', ')', '-', '.'); 
    var maxphonelength = 13; 
    var phonevalue1; 
    var phonevalue2; 
    var cursorposition; 

    function ParseForNumber1(object) { 
     phonevalue1 = ParseChar(object.value, zChar); 
    } 
    function ParseForNumber2(object) { 
     phonevalue2 = ParseChar(object.value, zChar); 
    } 

    function backspacerUP(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 backspacerDOWN(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 
        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, 8); 
      p40 = p40 + "-" 

      p41 = pp.substring(8, 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 <= 5) { 
       cursorposition = cursorposition + 2 
      } else if (cursorposition == 6) { 
       cursorposition = cursorposition + 2 
      } else if (cursorposition == 7) { 
       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 < 11) { 
       cursorposition = cursorposition + 3 
      } else if (cursorposition == 11) { 
       cursorposition = cursorposition + 1 
      } else if (cursorposition >= 12) { 
       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> 

並稱之爲你的asp:TextBox作爲

<asp:TextBox MaxLength="14" 
      runat="server" ID="HomePhone" 
      placeholder="(xxx) xxx-xxxx" 
      onkeydown="javascript:backspacerDOWN(this,event);" 
      onkeyup="javascript:backspacerUP(this,event);" /> 

而且如果你想在'）'後插入空格，你可以使用下面的技巧

function markSpace(field) { 
     if (field.value.includes(")")) { 
      field.value = field.value.split(')').join(') '); 
     } 
     if (field.value.includes(") ")) { 
      field.value = field.value.replace(/ +/g, ' '); 

     } 
    } 

和稱爲onblur="markSpace(this);"但我個人更喜歡使用JQuery :)