【JavaScript】onCompositionStart と onCompositionEnd

input要素の onCompositionStart と onCompositionEnd について調べた

developer.mozilla.org

onCompositionStartは、ReactやHTML標準におけるイベントハンドラ

IME（入力メソッドエディタ）を使った入力が開始されたときに発生するイベントをキャッチするためのもの

逆にonCompositionEndは、入力が終了したときに発生するイベントをキャッチするためのもの

日本語、中国語、韓国語などの入力では、文字を変換・確定する過程があるため、その途中を正確に処理するために用いられる

「あ」を入力し始めて、確定を押すまでの操作

基本的な使い方

ReactではonCompositionStartとonCompositionEnd を直接要素に渡すことで利用できる

import React, { useState } from 'react';

const IMEInputExample = () => {
  const [inputValue, setInputValue] = useState('');
  const [isComposing, setIsComposing] = useState(false);

  const handleCompositionStart = () => {
    setIsComposing(true);
  };

  const handleCompositionEnd = (e) => {
    setIsComposing(false);
    setInputValue(e.target.value); // IME確定時の値を取得
  };

  const handleChange = (e) => {
    if (!isComposing) {
      setInputValue(e.target.value); // IME確定後のみ更新
    }
  };

  return (
    <input
      type="text"
      value={inputValue}
      onCompositionStart={handleCompositionStart}
      onCompositionEnd={handleCompositionEnd}
      onChange={handleChange}
    />
  );
};

export default IMEInputExample;