jQuery Keypress 矢印キー
2023-09-17 16:45:40
質問
jQueryで矢印キー押下をキャプチャしようとしていますが、イベントがトリガーされません。
$(function(){
$('html').keypress(function(e){
console.log(e);
});
});
これは英数字キーにはイベントを発生させますが、deleteや矢印キーなどにはイベントを発生させません。
これらを捕捉できないのは、何か間違ったことをしているからでしょうか。
どのように解決するのですか?
この場合
.keydown()
なぜなら
.keypress()
は矢印を無視するので、キータイプをキャッチするには
e.which
結果画面を押してフォーカスし(フィドル画面では右下)、矢印キーを押すと動作が確認できます。
注意事項
-
.keypress()
は、Shift、Esc、Delete では絶対に発生しませんが.keydown()
は発射されます。 -
実は
.keypress()
は矢印キーでトリガーされるブラウザもありますが、クロスブラウザではないので、より信頼できるのは.keydown()
.
その他の有用な情報
-
を使用することができます。
.which
または.keyCode
のどちらかをサポートしないブラウザもありますが、jQueryを使用する場合は、jQueryが標準化しているので、その両方を使用するのが安全です。(私は.which
で問題が発生したことはありません)。 -
を検出するために
ctrl | alt | shift | META
が押されたことを検出するには、イベントオブジェクトの以下のプロパティをチェックします。-
event.ctrlKey
- ctrl -
event.altKey
- alt -
event.shiftKey
- シフト -
event.metaKey
- META ( コマンド ⌘ OR Windows キー )
-
-
最後に - 便利なキーコードをいくつか紹介します ( 完全なリストについては キーコード・シート ):
- 入力します。 13
- アップ 38
- ダウン: 40
- 右:39
- 左:37
- エスケープ:27
- スペースバー: 32
- Ctrl: 17
- オルト:18
- シフト: 16
関連
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] テキストボックスの内容が変更されたことを検出する方法
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] ECMAScriptとは?
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?