複数のaspの電話番号を書式設定する：JavaScriptのTextBox

Question

これは非常に基本的な問題かもしれません。私は電話番号をフォーマットするためのスタックオーバーフローで同様の解決策を見つけ、asp：TextBoxコントロールに使用しましたが、IDを直接渡すのではなく、複数の電話番号のテキストボックスコントロールでこのコードを使用します。私は5つの異なる電話フィールドを持っており、それらのテキストボックスはすべてasp：TextBoxです。私は提出されたすべてのコードから同じコードを呼びたいと思います。 （私はJavaScriptでこの解決策を探しています）。ここ

は、私のJSコードです：

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

として

/*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そして、私は携帯電話のフィールドのための他の同様の4つのテキストボックスを持っていると私がしたいですそれらすべてに同じ書式設定ロジックを使用することができます。複数のテキストボックスからこのJavaScriptコードまたは別の代替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);" /> 

などとIFでこのメソッドを呼び出し、 '）'の後ろにスペースを挿入する場合は、次のトリックを使用できます。

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を使用する方が好きです:)