入力フォームで日本語変換がおかしいときの対処

IMEには「変換中」という状態がある

日本語入力では、ローマ字を打ってから変換し、確定するまでの間に「変換中(未確定)」という状態が存在します。この間に表示されている文字はまだ確定しておらず、英数字の直接入力とは扱いが異なります。

ブラウザはこの状態を、変換開始・変換中・変換確定を表すcompositionイベント(compositionstart、compositionupdate、compositionend)で通知します。日本語入力の不具合の多くは、このイベントを無視して、通常のキー入力と同じに扱ってしまうことから起きます。

• 変換中(未確定)の文字は確定済みの入力とは別物
• compositionstart: 変換が始まった
• compositionend: 変換が確定した
• この状態を見ないと誤動作しやすい

Enterで送信されてしまう問題

もっとも多いのが、変換を確定するためのEnterを、フォーム送信のEnterと取り違えてしまうケースです。日本語を変換確定しただけなのに、勝手に検索や送信が走ってしまいます。

これは、変換中かどうかを見ずにEnterキーの押下だけで送信処理を走らせているのが原因です。変換確定のためのEnterのときは送信しない、という判定が必要です。compositionの状態を見て、変換中であれば送信を抑止する作りにします。

症状別チェック表

入力フォームで日本語変換がおかしいは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

変換中に文字が消える・重複する問題

入力のたびに値を加工して書き戻す処理(全角を半角に変換する、特定の文字を除去するなど)を、変換中にも実行してしまうと、未確定の文字が壊れたり消えたりします。変換中はその場の見た目を尊重し、確定したタイミングで加工するのが安全です。

また、入力ごとに発火するイベントだけを見て処理すると、変換中の中間状態に何度も反応してしまいます。確定を表すイベントを基準に処理すると、二重処理や文字化けを避けやすくなります。

誤動作を防ぐ実装手順

日本語入力の不具合を直すときは、次の順で対応すると整理しやすいです。

1. compositionstart と compositionend で変換中かどうかのフラグを持つ
2. Enterの送信処理は、変換中なら実行しないようにする
3. 値の自動加工は、変換中ではなく確定後に行う
4. 実機(特にスマートフォンや各種IME)で日本語を打って確認する
5. 英数字直接入力と日本語変換の両方で意図どおり動くか確かめる

実機・複数環境で確認するには

IMEの挙動はOSやブラウザ、入力ソフトによって細かく異なります。開発者の手元の環境だけで確認すると、別環境のユーザーで不具合が再現することがあります。実際に配信されたページを、複数の端末で日本語入力して試すのが確実です。

ギガサイト便にHTMLをドロップすると 〇〇.giga-site.com のhttpsの共有URLが発行され、スマートフォンを含む手元の各端末で実際に入力して挙動を確認できます。QRコードを配布すればスマホで開いてもらいやすく、修正したら同じURLのままファイルを差し替えられるので、関係者に再テストを依頼しやすくなります。