フィールドを修正するときのキャレット位置の問題

Question

元の開発者が以下のJavaScriptをプログラミングしましたが、私の意見では少しアマチュアですが、Javscriptではあまり機能しません。私が持っている時間とより良い解決策。

私が解決しなければならない問題は、テキストフィールド（任意の<input type="text" class="phone_val"...）に入力を送信するキーを押すたびに、コードが最後に移動するためです。

コードの目的は、データベースで使用する番号をフォーマットすることです。使用可能なパターンは次のとおりです。

  235 - 5555 
    (321) 234 - 5555 
    1 (321) 234 - 5555 
21 (321) 234 - 5555 
012 (321) 234 - 5555 

これらは、私たちが顧客ベースで使用する電話番号の種類です。キーを押すたびに最後に移動するキャレット（テキストカーソル位置）を使わずにこれらのパターンを適用できるようにする必要があります。人がフィールドの真ん中でいくつかの文字を修正する必要があるまで問題はありません。私は真剣に単純化し、正規表現でコードを縮小することができれば気にしません。

HTML：

<input type="text" class="phone_val" style="width: 85%; text-align: right;" 
     value="<%= CustomerFields("billing_phone") %>" id="billing_phone" 
     name="billing_phone" tabindex="10" /> 

のJavascript（jQueryの仮定）：

$(document).ready(function() { 
    $('.phone_val').attr('maxlength', 20); 
    $('.phone_val').keyup(function(){ 
     var startVal, finVal, i; 
     startVal = $(this).val().replace(/\D/g,''); 
     if (startVal.length <= 7) { 
      finVal = ""; 
      for (i = 0; i < startVal.length; i += 1) { 
       if (i === 3) { 
        finVal += " - " + startVal.charAt(i); 
       } 
       else { 
        finVal += startVal.charAt(i); 
       } 
      } 
     } 
     else if (startVal.length > 7 && startVal.length < 11) { 
      finVal = "("; 
      for (i = 0; i < startVal.length; i += 1) { 
       if (i === 3) { 
        finVal += ") " + startVal.charAt(i); 
       } 
       else if (i === 6) { 
        finVal += " - " + startVal.charAt(i); 
       } 
       else { 
        finVal += startVal.charAt(i); 
       } 
      } 
     } 
     else if (startVal.length >= 11) { 
      finVal = ""; 
      stopP = startVal.length < 13 ? startVal.length - 11 : 2; 
      for (i = 0; i < startVal.length; i += 1) { 
       if (i === stopP) { 
        finVal += startVal.charAt(i) + " ("; 
       } 
       else if (i === (stopP + 4)) { 
        finVal += ") " + startVal.charAt(i); 
       } 
       else if (i === (stopP + 7)) { 
        finVal += " - " + startVal.charAt(i); 
       } 
       else { 
        finVal += startVal.charAt(i); 
       } 
      } 
     } 

     if (startVal.length < 4) { 
      finVal = finVal.replace(/\D/g,''); 
     } 
     $(this).val(finVal); 
    }); 
}); 

Answer 1

これは、多くのレベルで恐ろしいです。ユーザーにとって、ここでは2つの悪いことがあります：最初に、入力時に入力を変更するのは混乱し煩わしく、2番目に、文字を入力するたびにキャレットを最後まで移動するだけです。キャレットを移動するコードを記述することは可能ですが、その代わりに、changeまたはblurのイベントで検証を行うか、コメントで示唆しているようにキーボードの非アクティブを数秒間待つことをおすすめします。

Answer 2

は、ここで私はこれまで持っているものです：7桁と10〜13桁の世話をするが、私はその間のもので何をすべきかわからない

$('.phone_val').blur(function() { 
    var inpVal = $(this).val().replace(/\D/g, ''); //get rid of everything but numbers 

    // RegEx for: 
    // xxx (xxx) xxx - xxxx 
    //  xx (xxx) xxx - xxxx 
    //  x (xxx) xxx - xxxx 
    //  (xxx) xxx - xxxx 
    inpVal = inpVal.replace(/^(\d{0,3})(\d{3})(\d{3})(\d{4})$/, '$1($2) $3 - $4'); 

    // RegEx for (needs a separate one because of the parentheses): 
    //    xxx - xxxx 
    inpVal = inpVal.replace(/^(\d{3})(\d{4})$/, '$1 - $2'); 

    $(this).val(inpVal); 
}); 

。私はそれらも同様にフォーマットする必要があります、ユーザーは簡単に間違いを見ることができますか？または私はそれらを一人残すべきですか？