問題
IMEで全角文字入力→確定せずに別の場所にフォーカスを移すと、文字が重複して入力される。
文字面だとわかりづらいので、下記のGIFを見てもらったほうが早い。
「あああ」 の入力が二倍になって「ああああああ」になっている。
この問題は、下記テストページで体験できるようにしてある。
この恐怖を体感してみてほしい。
発生する条件
どうも下記の状態をすべて満たすと発生する模様
- ブラウザが Edge Chrome （＝つまりChroniumのブラウザ。Firefoxだと発生しない）
- IMEが Microsoft IME （Google IMEだと発生しない。）
- 入力欄（input type=textとか）で、フォーカス時に入力欄を全選択している。
jsとHTMLだと下記のような感じ。
- 全角入力の変換確定前に、別の入力欄にフォーカスを移動させる
- フォーカスを全選択していても、一度全選択を解除した後だと発生しない。
なぜ発生するのか
Microsoft IMEのバグ？（相性が悪い？）の模様。
フォーカス時に全選択する、というUIがあまりないことが原因で、あまりネットにも情報がない。
解決方法
フォーカス時の全選択をやめてしまう。これで100点取れる。
該当項目が半角入力のみを想定されているのであれば、
inputmodeを指定して、フォーカス時に半角入力モードになるようにしてあげれば、 発生確率は下げられる。
※ご参考URLの 全選択解除→時間をおいて再度全選択、の方法だと解消されなかった。
ほかの解決方法があるなら、教えてください
ご参考
input入力中に変換未確定の状態でフォーカス移動すると文字が二重入力される
Chrome(Windows版)でinput要素への入力中に変換未確定の状態でフォーカス移動すると文字列が二重入力される件について｜さとう
余談（GIF動画）
GIFを撮影する方法ですが、
Win11 の Snipping Tool で動画撮影 → AdobeのサイトでGIF化 して作っています。
