マスクされた1つの入力テキストボックスの2つのコードフォーマットを編集します

Question

私は単一の入力テキストHTMLコントロールのために両方とも入力する必要がある卒業生と敬意を表す2つのマスクG999-9とH99-9を持っています。

最初に入力したときに、Gにヒットした場合、Graduateフォーマットのフォーマットを表示したいと思っています。Honorsについては、Honorsフォーマットのフォーマットを表示したいと思います。 javascriptやjQueryでこれを行う簡単な方法はありますか？

例：

 
G111-1 
H91-5 
G001-3 
G___-_ (If you hit G it should show the Graduate format) 
H__-_ (If you hit H it should show the Honors format.) 
____-_ (Type anything else, or nothing do this.) 

おかげで、 マルク

Answer 1

Regex Based Demo

よろしく！正規表現！はい、他のすべての（HTML以外の）構文解析の質問と同様に、正規表現があります。 :)

$("input").keyup(function(e){ 
    if(e.keyCode > 40 || e.keyCode < 37) 
    { 
     var validInput = $(this).val().match(/(([G])(([0-9]{3}[-]([0-9]{0,1})?|[0-9]{0,3})?)?|([H])(([0-9]{2}[-]([0-9]{0,1})?|[0-9]{0,2})?)?)/); 
     $(this).val(validInput?validInput[0]:"") 
    } 
}); 

これは少し畳み込まれています（最適化の助けがあれば大歓迎ですが）。

Answer 2

簡単な方法はありますか？あなたは、文字列を歩かなければならないか、またはファンキーな正規表現を使用する必要があります。

通常、私たちはいますが、正規表現についてあまり知らない（おそらく悪いの仮定が、それらを読むことができ、ほとんどの人が最初にそれらの方に引き寄せます）を前提にしてで、このために正規表現を使用したいです何が起こっているのか、次のあなたを保つの希望は、私はより多くの手続き、それを書いた：

<input type="text" class="formatted" /> 

$(document).ready(function(){ 
    function applyMask(instr){ 
     var pOut = [], delimitter = '-', format = 0, pSplit = 4, pMax = 6; 
     // There are a lot of ways to express this. I just chose one that should 
     // be understandable. 
     if ((instr.length > 0) && (instr[0].toUpperCase() == 'H')) 
     { 
      pSplit = 3; 
      pMax = 5; 
     } 
     pMax = Math.min(pMax, instr.length); 

     for (var i=0; i < pMax; i++) 
     { 
      if ((i==pSplit) && (instr[i] != delimitter)) 
      { 
       pOut.push(delimitter); 
      } 
      else 
      { 
       pOut.push(instr[i]); 
      } 
     } 
     return pOut.join(''); 
    } 

    $('.formatted').keyup(function(){ 
     $(this).val(applyMask($(this).val()).toUpperCase()); 
    }); 
}); 

はここでも、フィドルです：http://jsfiddle.net/UdcND/

Answer 3

簡単にマスクエディットにテキスト入力を変換するためのいくつかのjQueryプラグインがあります。

• は単純だが便利なプラグイン：http://www.pengoworks.com/workshop/js/mask/

• 別の良いオプション：http://digitalbush.com/projects/masked-input-plugin/