JavaScript で 日本語入力 ON のときと OFF のときとで 確定入力 (Enterキー入力) を判別する方法についてまとめます。
検索ボックスなどのテキスト入力ボックスにおいて確定ボタンの組み合わせた UI を設計するとき、入力を簡易にするために Enterキー で確定を意味させたいと思うことがあります。 …が、日本語入力の Enter と 確定を意味する Enter をどのように判別すると良いか材料がないので、 ここではいくつかのブラウザでイベントがどのように発生しているかを調査しました。
実際に使えるようにした jQuery プラグイン は こちら に記載しています。
目次
各ブラウザの挙動
日本語入力ON および OFF それぞれの状態で [a] → [Enter] と入力したときの動作の違いを以下にまとめます。
以下の表では、「数値」は「キーコード」を、「-」は「イベントの発生がないこと」を示しています。
日本語入力 ON
| time | key | event type | key code | |||
|---|---|---|---|---|---|---|
| Chrome 45.0 | Firefox 41.0 | Opera 32.0 | IE 11.0 | |||
| 1 | あ | keydown | 229 | - | 229 | 229 |
| 2 | keypress | - | - | - | - | |
| 3 | keyup | 65 | - | 65 | 65 | |
| 4 | [Enter] | keydown | 229 | - | 229 | 229 |
| 5 | keypress | - | - | - | - | |
| 6 | keyup | - | 13 | - | 13 | |
日本語入力 OFF
| time | key | event type | key code | |||
|---|---|---|---|---|---|---|
| Chrome 45.0 | Firefox 41.0 | Opera 32.0 | IE 11.0 | |||
| 1 | a | keydown | 65 | 65 | 65 | 65 |
| 2 | keypress | 97 | 0 | 97 | 97 | |
| 3 | keyup | 65 | 65 | 65 | 65 | |
| 4 | [Enter] | keydown | 13 | 13 | 13 | 13 |
| 5 | keypress | 13 | 13 | 13 | 13 | |
| 6 | keyup | 13 | 13 | 13 | 13 | |
確定入力の判別方法
上の表を見ると分かりますが、日本語入力 ON のときは keypress イベント が発生せず、日本語入力 OFF のときは keypress イベント が発生します。
入力を確定したときの [Enter] かどうかは、keypress イベント が発生したかどうかを見ることで判別できます。
- IME変換時
keydown→keyup- IME変換しない時
keydown→keypress→keyup
関連記事
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！