jQueryキーボードイベントの例
jQueryには、
keyup()
、
keydown()
、
keypress()
の3つのキーボードイベントがあります。
-
keyup() – ユーザーがキーボード上のキーを離したときに発生します.
-
keydown() – ユーザーがキーボードのキーを押すと発生します.
-
keypress() – ユーザーがキーボードのキーを押すと発生します.
一般的なステートメントでは、
keydown()
は
keypress()
イベントに似ています。
実際には、
keydown()
と
keypress()
イベントの間にはかなりの違いがあります。
1.リピートキー
キーを押したままにすると、keydown()イベントが一度トリガされますが、キーを離すまで、keypress()イベントは引き続きトリガされます。
2.修飾キー
キーボード修飾キー(
ctrl、shift、alt …
)はkeydown()イベントを起動しますが、keypress()イベントは起動しません。
3. KeyCode – ASCIIコード
たとえば、A = 65、a = 97の場合は、http://www.asciitable.com/[ASCIIテーブルチャート]を参照してください。
-
keydown()とkeyup()はa = 65、A = 65(大文字小文字を区別しない –
小文字と大文字は同じ値を表示します)。
-
keypresss()はa = 97、A = 65(大文字小文字を区別する小文字と
大文字は異なる値を表示します)。
実際の文字キーを取り込むには、keypress()イベントに行きます。
KeyCodeはFireFoxに表示されていませんか?
Firefoxで
event.keyCode
を取得するには、代わりに
event.which
を使用する必要があります.jQueryも同様に推奨します。だからもっと良い方法は
var keycode = (event.keyCode ? event.keyCode : event.which);
自分で試してみてください
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> span{ padding:8px; margin:8px; color:blue; } div{ padding:8px; margin:8px; } </style> </head> <body> <h1>jQuery keyup(), keydown() and keypress() example</h1> <label>TextBox : </label> <input id="textbox" type="text" size="50"/> <div> <label>1. keyup() Message :</label> <span id="msg-keyup"></span> </div> <div> <label>2. keydown() Message :</label><span id="msg-keydown"></span> </div> <div> <label>3. keypress() Message :</label><span id="msg-keypress"></span> </div> <script type="text/javascript"> $('#textbox').keyup(function(event){ $('#msg-keyup').html('keyup() is triggered!, keyCode = ' + event.keyCode + ' which = ' + event.which) }); $('#textbox').keydown(function(event){ $('#msg-keydown').html('keydown() is triggered!, keyCode = ' + event.keyCode + ' which = ' + event.which) }); $('#textbox').keypress(function(event){ $('#msg-keypress').html('keypress() is triggered!, keyCode = ' + event.keyCode + ' which = ' + event.which) }); </script> </body> </html>