web-dev-qa-db-ja.com

jQuery Keypress矢印キー

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

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

これは英数字キーのイベントを生成しますが、削除、矢印キーなどはイベントを生成しません。

それらをキャプチャしないために何が間違っていますか？

javascriptjquerykeypress
66
RedBassett

以下に例を示します。 JSnippet DEMO keydown（）vs keypress（）

.keydown()は「矢印」を無視するため、.keypress()を使用する必要があります。キータイプをキャッチするにはe.whichを使用します

結果画面を押してフォーカスし（フィドル画面の右下）、矢印キーを押して機能を確認します。

注：

  1. .keypress()はShift、Esc、Deleteで起動されることはありませんが、.keydown()は起動されます。
  2. 実際、一部のブラウザの.keypress()は矢印キーによってトリガーされますが、クロスブラウザではないため、.keydown()を使用する方が信頼性が高くなります。

より有用な情報

  1. イベントオブジェクトの.whichまたは.keyCodeを使用できます。一部のブラウザーはそれらのいずれかをサポートしませんが、jQueryを使用する場合はjQueryが標準化するため両方を使用しても安全です。 （.whichに問題がなかったことを好みます）。
  2. 実際にキャプチャされたキーでctrl | alt | shift | METAプレスを検出するには、イベントオブジェクトの次のプロパティを確認する必要があります-プレスされた場合、TRUEに設定されます：

  3. 最後に-ここにいくつかの便利なキーコードがあります（完全なリスト- keycode-cheatsheet ）：

    • 入力：13
    • アップ：38
    • ダウン：40
    • 右：39
    • 左：37
    • Esc：27
    • スペースバー：32
    • Ctrl：17
    • Alt：18
    • シフト：16
170
Shlomi Hassid
$(document).keydown(function(e) {
    console.log(e.keyCode);
});

Keypressイベントは矢印キーを検出しますが、すべてのブラウザーで検出するわけではありません。したがって、キーダウンを使用する方が適切です。

これらは、コンソールログで取得する必要があるキーコードです。

  • 左= 37
  • アップ= 38
  • 右= 39
  • ダウン= 40
25
Harsha Venkatram

矢印キーが押されているかどうかは、次の方法で確認できます。

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) 
      alert( "arrowkey pressed" );          
});

jsfiddle demo

8
suhailvs

JQueryからのリンクを参照してください

http://api.jquery.com/keypress/

それは言います

ブラウザがキーボード入力を登録すると、keypressイベントが要素に送信されます。これはkeydownイベントと似ていますが、Shiftキー、Escキー、deleteキーなどの修飾キーと非印刷キーはkeydownイベントをトリガーしますが、keypressイベントはトリガーしません。プラットフォームとブラウザによっては、2つのイベントの他の違いが生じる場合があります。

つまり、矢印の場合はキーを押すことができません。

2
Tatha
left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

}）;

1
Bhaskara Arani
$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}
0
Bharath Mb