今回はjQueryとJavaScriptで入力した文字を精査する処理を
作成したいと思います。

今回は、keypress()・keyup()を使用します。

まず、keypress()・keyup()の書式は

$("セレクタ").keypress(function(e) {
?// 処理A
});

$("セレクタ").keyup(function(e) {
?// 処理B
});

keypress()は、キーが押された時に実行したい処理を設定できます。
keyup()は、キーが上がった時に実行したい処理を設定できます。
他にもkeydown()があり、キーが押し下げられた時に実行したい処理を
設定できます。

実行される順序は、基本的にはkeydown()→keypress()→keyup()の順番です。
ただし、押下されたキー、ブラウザ、IMEの状態によっては、
発生しないイベントやイベントの発生順序が異なる場合があるようです。

入力した文字を精査するために、どのキーが押されたかを判別します。
keypress()内でfunction(e)としておりますが、
e.whichでキーコードを取得することができます。

例えば「1」キーを押した場合は「49」を取得します。

この、キーコードを文字に変換してくれるものや
文字を比較してくれるものがJavaScriptに用意されています。

// キーコードを文字に変換
String.fromCharCode(キーコード);

// 比較
文字列.match(正規表現);

上記を踏まえて、下記の仕様のサンプルを記載します。
・数字のみを許可
・同じ数字は使用不可
・3桁で終了

ここで、注意したいのが
keypress()・keyup()内で$(this).val()とすれば、
入力文字を取得できるのですが、それぞれのメソッドで取得内容は異なります。
keypress()の場合は、直前に入力した文字は含まれない。
keyup()の場合は、直前に入力した文字も含まれる。

例えば、

最初に「1」を入力
→keypress()では取得できない
→keyup()では取得できる

次に「2」を入力
→keypress()では「2」は取得できず、前に入力した「1」のみ取得
→keyup()では「12」を取得できます。

では、また来月お会いしましょう。。。