JavaScript における 日本語入力 確定 (Enter) イベント

0 件のコメント

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変換時
keydownkeyup
IME変換しない時
keydownkeypresskeyup

関連記事