jQueryには、

keyup()



keydown()



keypress()

の3つのキーボードイベントがあります。

  1. keyup() – ユーザーがキーボード上のキーを離したときに発生します.

  2. keydown() – ユーザーがキーボードのキーを押すと発生します.

  3. 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テーブルチャート]を参照してください。

  1. keydown()とkeyup()はa = 65、A = 65(大文字小文字を区別しない –

小文字と大文字は同じ値を表示します)。

  1. 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>