JavaScript 一般については次のページにまとめています。

キーイベント

参考:

Keyboard Events | jQuery API Documentation [Official]

使い方

キーが入力された際、各イベントは次の順序で発生する。

  1. keydown
  2. keypress
  3. keyup

参考:

jQuery のキーイベントについて調ベてみた | cly7796.net

jQuery を使ってキーボードからの操作でイベントを実行させる方法 | BlackFlag

JavaScript の keydown と keypress の違い | TM Life

jQuery で押されたキーを取得する · Issue #29 · shikakun/tips – GitHub

jQuery でテキストボックスの変更を監視/検知する – Qiita

キーボードのイベント keydown keypress keyup | ワクガンス

keydown、keypress イベントのブラウザ毎の挙動の違い | Enjoy*Study

What’s the difference between keyup, keydown, keypress and input events? – Stack Overflow

keyup

参考:

keyup(fn) | jQuery 日本語リファレンス

jQuery keyup() Method | W3Schools

.keyup() | jQuery API Documentation [Official]

keydown

参考:

keydown(fn) | jQuery 日本語リファレンス

jQuery keydown() Method | W3Schools

.keydown() | jQuery API Documentation [Official]

keypress

参考:

keypress(fn) | jQuery 日本語リファレンス

jQuery keypress() Method | W3Schools

.keypress() | jQuery API Documentation [Official]

keypress event not working properly in safari and in Firefox with jQuery 1.3 – Stack Overflow

KeyboardEvent

参考:

キーイベント | so-zou.jp

KeyboardEvent | MDN

KeyboardEvent.key | MDN

KeyboardEvent.key | Can I Use Support Tables

キー値

参考:

Key Values | MDN

修飾キー

参考:

jQuery を使ってキーの同時押し取得 (shift や ctrl) – Qiita

日本語入力

参考:

jQuery で IME 入力確定時にイベントを発行する – Qiita

IE 系で input イベントが発火しないのをなんとかしてみる(ついでに IME 入力中は発火しないイベントも追加)- Qiita

ページ全体にハンドラを追加する

document オブジェクトにハンドラを追加する。

$(document).on('keydown', (e) => {
  console.log(e.key)
})

参考:

jQuery の document の意味とは? – Qiita

How to catch .keypress() on body – jQuery Forum

keydown on body? – Stack Overflow

サンプル

参考:

jQuery .keydown() .keyup() .keypress() .focusout() .focus() | CodePen

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA