jqueryのonイベント内で、エンターキーを押したときにif条件がtrueになるようにしたいが、日本語入力変換時のエンターキーは反応させたくない。

検索機能をjqueryで作成中、困ったことが起きてしまいました。

ざっくり結論

今、日本語を入力中か判定するフラグを作る

「今、日本語を入力中だからエンターキー押しても無視して！」 と処理を書く

どうやって日本語を入力中か判定するのか？

変換キー（またはEnter）を押す → 日本語 に変換
このとき compositionstart と compositionend が発生！→これを活用する

IMEとは？

IME（入力メソッドエディタ） は、日本語や中国語などの 文字変換をサポートするソフトウェア です。
キーボードでローマ字やひらがなを入力し、それを 漢字やカタカナに変換 する機能を持っています。

IMEの具体的な役割

具体的な処理の流れ

1. 日本語入力を開始すると compositionstart イベントが発生する
   • isComposing を true にする
   • → 「今、日本語を入力中だよ！」 という状態にする
2. 日本語入力を確定すると compositionend イベントが発生する
   • isComposing を false にする
   • → 「日本語入力は終わったよ！」 という状態にする
3. Enterキーを押したとき (keydown イベント)
   • isComposing === false のときだけ処理を実行する
   • → 日本語入力の確定で押した Enter は無視される！

$(function () {
  //判定用のフラグを定義
    let isComposing = false;

    // IME入力開始
    $(document).on("compositionstart", function () {
        isComposing = true;
    });

    // IME入力確定（Enter で確定してもここで解除）
    $(document).on("compositionend", function () {
        isComposing = false;
    });

    // Enterキーの処理
    $(document).on("keydown", function (event) {
        if (event.key === "Enter" && !isComposing) {
            event.preventDefault(); // 必要ならデフォルトの動作を防ぐ
            console.log("Enterキーが押されました（IME変換中は無視）");
            // ここに処理を書く
        }
    });
});