Chrome で IME 変換を制御する

Chrome で IME 変換を制御するfrom: タイポを勝手に修正するテキストフィールド

Chrome にて、IME によるかな漢字変換を強制的に制御したい。


⬇ JavaScript で強制的に制御する。


ブラウザや IME ごとの挙動の違いもあり、かなり沼っぽい。
	/takker/javascriptからIMEをcancelする
	ブラウザからIME状態を制御する方法

Selection や Range を使うことで、Chrome と Mozc 環境ではうまく制御できた。

tsCopied!
   const handleCompositionUpdate:CompositionEventHandler = useCallback((event) => {
     const data = event.data;
     const unnaturalAlphabetRegExp = /[ぁ-んー][ａ-ｚＡ-Ｚ]+[ぁ-んー]/;

     if (!unnaturalAlphabetRegExp.test(data)){
       return ;
     }

     const convertedText = toHanAscii(toHebon(data)).toLowerCase();
     const selection = window.getSelection();
     const currentRange = selection?.getRangeAt(0);

     if (!currentRange || !(currentRange.startContainer instanceof Text) || !selection) {
       throw new Error();
     }

     currentRange.startContainer.replaceData(currentRange.startOffset, currentRange.endOffset - currentRange.startOffset, convertedText);
     selection.removeAllRanges();

     // IME 変換を終了させてから、キャレットを設置する。
     setTimeout(() => {
       const nextRange = document.createRange();

       nextRange.setStart(currentRange.startContainer, currentRange.startOffset + convertedText.length);
       selection.addRange(nextRange);
     });
   }, []);
関連ページ
