1. ホーム
  2. javascript

jQuery Keypress 矢印キー

2023-09-17 16:45:40

質問

jQueryで矢印キー押下をキャプチャしようとしていますが、イベントがトリガーされません。

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

これは英数字キーにはイベントを発生させますが、deleteや矢印キーなどにはイベントを発生させません。

これらを捕捉できないのは、何か間違ったことをしているからでしょうか。

どのように解決するのですか?

この場合 .keydown() なぜなら .keypress() は矢印を無視するので、キータイプをキャッチするには e.which

結果画面を押してフォーカスし(フィドル画面では右下)、矢印キーを押すと動作が確認できます。

注意事項

  1. .keypress() は、Shift、Esc、Delete では絶対に発生しませんが .keydown() は発射されます。
  2. 実は .keypress() は矢印キーでトリガーされるブラウザもありますが、クロスブラウザではないので、より信頼できるのは .keydown() .

その他の有用な情報

  1. を使用することができます。 .which または .keyCode のどちらかをサポートしないブラウザもありますが、jQueryを使用する場合は、jQueryが標準化しているので、その両方を使用するのが安全です。(私は .which で問題が発生したことはありません)。
  2. を検出するために ctrl | alt | shift | META が押されたことを検出するには、イベントオブジェクトの以下のプロパティをチェックします。
  3. 最後に - 便利なキーコードをいくつか紹介します ( 完全なリストについては キーコード・シート ):

    • 入力します。 13
    • アップ 38
    • ダウン: 40
    • 右:39
    • 左:37
    • エスケープ:27
    • スペースバー: 32
    • Ctrl: 17
    • オルト:18
    • シフト: 16