キー入力を扱う方法 (keyup / keydown / keypress) [jQuery]

キーイベント

参考：

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

• key

参考：

キーイベント | 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