日本語入力などのIME(入力方式エディタ)を使っているとき、文字変換を確定するために押したEnterキーがそのままフォーム送信のトリガーになってしまう問題を解説する記事です。「変換を確定するつもりで押したEnterキーによって、書きかけのメッセージがそのまま送信されてしまっています」という現象の原因は、Enterキーが変換確定とフォーム送信の両方に使われる点にあるとしています。フォームのテキスト入力欄でEnterキーを押すと、フォーム内の最初の送信ボタンがclickイベントを発生させる暗黙的送信の仕組みも背景にあります。
対策として、標準のisComposingプロパティに加え、非推奨とされるkeyCode === 229の判定も併用すべきだと説明しています。229という値はWindowsの仮想キーコードVK_PROCESSKEYに由来するものです。SafariにはWebKit Bug #165004として知られる実装バグがあり、変換確定用のkeydownイベントより先にcompositionendイベントが発生し、その時点でisComposingがfalseになってしまうため、isComposingだけでは判定漏れが起きるとのこと。推奨されるコードは「if (event.isComposing || event.keyCode === 229) return;」という条件でIME変換中の処理をスキップするというものです。
出典が伝えている要点
- compositionstart、compositionupdate、compositionendというcompositionイベント群が定義されている
- SafariにはWebKit Bug #165004として知られる実装バグがあり、変換確定用のkeydownイベントより先にcompositionendイベントが発生し、その時点でisComposingがfalseになる
- keyCode===229の229という値はWindowsの仮想キーコードVK_PROCESSKEY(16進数で0xE5)に由来する
- フォームのテキスト入力欄でEnterキーを押すと、フォーム内の最初の送信ボタン(デフォルトボタン)がclickイベントを発生させる暗黙的送信の仕組みがある
- 推奨されるコードはif (event.isComposing || event.keyCode === 229) return;という条件でIME変換中の処理をスキップするというもの
原文より
変換を確定するつもりで押した Enter キーによって、書きかけのメッセージがそのまま送信されてしまっています
出典: azukiazusa.dev