JavaScript: テキストフィールドに入力した日本語の確定と変換後の[enter]キーの押下を切り分ける

たとえば、検索ボックスに入力した語句を、[enter]キーの押下で検索実行したい場合があります。日本語の入力では、[enter]キーの操作を変換の確定とは切り分けなければなりません。

結論: KeyboardEvent.keyCodeプロパティで[enter]キーを調べる

日本語入力が確定したあとの[enter]キーの押下かどうかは、KeyboardEvent.keyCodeプロパティで調べるのがよいでしょう。テキスト入力フィールド(<input type="text">要素)が変数eventTargetで参照されている場合は、つぎのようなコードです。

eventTarget.addEventListener('keydown', ({ keyCode }) => {
	if (keyCode === 13) {
		// 日本語入力確定後の[enter]キーの処理
	}
});

KeyboardEvent.keyCodeプロパティは非推奨

ところが、話は簡単ではありません。mdnのドキュメント「KeyboardEvent: keyCode プロパティ」には、いきなりこう書かれています。

非推奨: この機能は非推奨になりました。

とはいえ、情報を検索してみても、KeyboardEvent.keyCodeプロパティ以外の妙案は見つかりませんでした。それどころか、mdnの「Element: keydown イベント」のページには、以下のようなコード例が示されています。

変換操作中のkeydownイベントをすべて無視するには、次のようにしてください（229は、IMEによって処理されたイベントに関連するkeyCodeに設定される特別な値です）。

eventTarget.addEventListener("keydown", (event) => {
	if (event.isComposing || event.keyCode === 229) {
		return;
	}
	// 何かを行う
});

KeyboardEvent.isComposingプロパティは変換中であるかどうかを示す

上記mdnのコード例で気になるのは、KeyboardEvent.isComposingプロパティです。変換操作中であるかどうかをブール値で示します。このプロパティを使えば、KeyboardEvent.keyCodeに頼らなくて済むのではないでしょうか。何より「非推奨」ではありません。

けれど、今のところ最大の難点は、値がブラウザによって異なることです。具体的には、Safari / macOSで起こります。連文節中のひとつひとつの語句を変換しているときは、KeyboardEvent.isComposingプロパティの値はtrueです。ところが、連文節全体の変換を確定したとき、Safariではfalseが返されてしまいます。本稿冒頭の検索ボックスの例でいえば、検索が実行されるということです。

環境によって結果はバラつくことが想定されます。興味のある方は、つぎのサンプルでお試しください。mdnのコード例でも認めているように、KeyboardEvent.isComposingプロパティの値がブラウザ間で揃うまでは、KeyboardEvent.keyCodeを用いるしかないでしょう。

サンプル■JavaScript: Handling the enter key with IME

See the Pen JavaScript: Handling the enter key with IME by Fumio Nonaka (@FumioNonaka) on CodePen.