jQueryで矢印キーを押したことをキャプチャしようとしていますが、イベントがトリガーされません。
$(function(){
$('html').keypress(function(e){
console.log(e);
});
});
これは英数字キーのイベントを生成しますが、delete、矢印キーなどはイベントを生成しません。
何が間違っているのでしょうか?
以下はその例です:JSnippet DEMO keydown() vs keypress().
.keypress()は"Arrows"を無視するので、
.keydown()`を使うべきです。
結果画面を押してフォーカスを当て(fiddle画面の右下)、矢印キーを押して動作を確認する。
注釈:。
.keypress()
はShift、Esc、Deleteでは決して実行されませんが、.keydown()
では実行されます。
2.2.いくつかのブラウザでは .keypress()
は矢印キーでも発生しますが、クロスブラウザではないので .keydown()
を使う方が確実です。**より有用な情報
3.イベントオブジェクトの.which
または.keyCode
を使用することができます - ブラウザによってはどちらか一方をサポートしていないものもありますが、jQueryを使用する場合はjQueryが標準化しているので、両方を使用するのが安全です。(私は.which
の方が好きです。問題になったことはありません)。
4.実際にキャプチャされたキーで ctrl | alt | shift | META
が押されたことを検出するには、イベントオブジェクトの以下のプロパティをチェックする必要があります:
event.ctrlKey
- ctrl
event.altKey
- alt
event.shiftKey
- shift
event.metaKey
- META ( Command ⌘ OR Windows Key )
5.最後に、便利なキーコードをいくつか紹介しよう(全リストはkeycode-cheatsheet):
Enter: 13
アップ:38
下:40
右:39
左:37
Esc: 27
スペースバー:32
Ctrl: 17
Alt: 18
シフト:16
$(document).keydown(function(e) {
console.log(e.keyCode);
});
Keypressイベントは矢印キーを検出しますが、すべてのブラウザで検出できるわけではありません。 そのため、キーダウンを使用する方が良いでしょう。
これらはコンソールログに表示されるキーコードです:
JQueryからのリンクを参照してください。
[http://api.jquery.com/keypress/][1]
それによると
keypressイベントは、ブラウザがキーボード入力を登録したときに要素に送られます。これはkeydownイベントと似ていますが、ShiftやEsc、deleteなどの修飾キーや非印字キーはkeydownイベントをトリガーしますが、keypressイベントはトリガーしません。この2つのイベントの違いは、プラットフォームやブラウザによって異なります。
つまり、矢印キーの場合、keypressは使えないということです。
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();
});。