概要
クロスブラウザ対応について調べていたところ、JavaScriptの面倒なところをjQueryが吸収してるんだなーとしみじみと思ったので本記事を書きました
キーコードの取得方法周辺のお話を書いています
※ あまりJavaScriptに詳しくないので、なにかご指摘あれば教えていただければと思います
（通常の）JavaScript
Eventオブジェクトの取得方法
IE8以下ではwindow.eventにイベント情報が含まれているため、以下取得が主流？
var e = e || window.event;
イベント発生要素
イベントが発生したElementを返す
微妙に全ブラウザ対応のプロパティが無い・・・
| プロパティ | 説明 |
|---|---|
| e.target | イベント発生要素を返す（IE8以下非対応） |
| e.srcElement | イベント発生要素を返す（FireFoxは61以下非対応） |
キーイベントと関連プロパティ
- イベント
| イベント | 説明 | 取得対象キー |
|---|---|---|
| onkeypress | pressing = キーボードの押下中 | 画面上表示可能なキー |
| onkeydown | presses = キーを押下した時 | 機能キー（F5, enter等） |
| onkeyup | releases = キーを離した時 | 機能キー（F5, enter等） |
- 関連プロパティ
| プロパティ | 説明 | onkeypress | URL |
|---|---|---|---|
| e.key | 入力値そのものを取得（IE8以下非対応） | 対応 | KeyboardEvent key Property |
| e.code | unicode値を返す（ブラウザ依存 ※ IE非対応、キーボード依存） | 対応 | KeyboardEvent code Property |
| e.charCode | unicode値を返す（ブラウザ依存） | onkeypress時のみ | KeyboardEvent charCode Property |
| e.keyCode | ASCII値（onkeypress時）、unicode値を返す（FireFox非対応） | 対応 | KeyboardEvent keyCode Property |
| e.which | ASCII値（onkeypress時）、unicode値を返す（IE8以下非対応） | 対応 | KeyboardEvent which Property |
jQuery
上のJavaScript仕様をJQueryのイベントオブジェクトがまとめてくれています笑
マルチブラウザのことしっかり書いていますね
jQuery(https://jquery.com/) より以下抜粋
It makes things like HTML document traversal and manipulation,
event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Eventオブジェクトの取得方法
全く気にしなくて大丈夫です
通常のJavaScriptとObjectが違いますので、そこだけ注意かと思います
Event Object | jQuery API Documentation
$("document").on("keydown", function(e) {
// e自体がjQueryのEventオブジェクト
});
イベント発生要素
イベントが発生したElementを返す
srcElementの考慮が不要になっています
表にしていますが、JavaScriptと比べるためです
event.target | jQuery API Documentation
| プロパティ | 説明 |
|---|---|
| e.target | イベント発生要素を返す（全ブラウザ対応） |
キーイベントと関連プロパティ
- イベント
このあたりはあまり変わらない
Keyboard Events | jQuery APIDocumentation
| イベント | 説明 |
|---|---|
| keypress | JavaScriptのonkeypress |
| keydown | JavaScriptのonkeydown |
| keyup | JavaScriptのonkeyup |
- 関連プロパティ
いろいろまとめてくれています
表にしていますが、JavaScriptと比べるためです
| プロパティ | 説明 | URL |
|---|---|---|
| e.which | JavaScriptのkeyCode、charCodeを標準化したもので、unicode値を返す | event.which jQuery API Documentation |
- 使い方
結局jQueryでやるとすごい簡単にできるという
$("document").on("keydown", function(e) {
var keyCode = e.which;
})
付録：同時押しキー
ShiftやCtrlと他キーの同時押し等の判定は以下のようなプロパティもあるので、チャットのメッセージ入力欄等でも使えそうです（通常のJavaScriptも）
| プロパティ | 説明 |
|---|---|
| e.shiftKey | Shiftキーを押した状態か |
| e.ctrlKey | Ctrlキーを押した状態か |
結論
クロスブラウザ対応はjQuery等のライブラリにお任せしましょう
JavaScriptの記事がありすぎて、混乱してました・・・