全角入力の未確定の状態を取得する

未確定の日本語を入力している状態について

キーボードで日本を入力するとき、まずはひらがなやカタカナで入力をして、その後に漢字や全角半角などの変換をします。
変換が完了する前の未確定状態は、KeyboardEventオブジェクトのisComposingプロパティから参照することが可能です。

isComposingプロパティは変換完了前のときはtrue、変換が完了したらfalseが入ります。
そのため、このプロパティがtrueの間は変換が未確定のまま入力中の状態であることが分かります。

今回は例として、以下の1行フォームのHTMLを使ってisComposingプロパティの値を確認していきます。

HTMLコード例

<form id="form_recipe" method="post" action="">
  <label for="input_name">テキスト入力フォーム：</label>
  <input type="text" id="input_name" name="input_name" value="">
</form>

ここではシンプルに、キーが押されたときに発生するイベント「keydown」をイベントリスナーに登録して、その中でisComposingプロパティの値を参照します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

  window.addEventListener("keydown", function(e){
    if( e.isComposing ) {
      console.log("入力中");
    }
  });
});

このコードを実行すると、キーボードで全角入力をしているときにコンソールに「入力中」が出力されます。
isComposingプロパティは未確定の入力があるときのみtrueになるため、半角入力で未確定状態がないときは常にfalseなので何も出力されません。

今回は全角入力の未確定状態のみを取得しましたが、全角入力は入力開始と入力終了のタイミングでそれぞれイベントが発生します。
こちらのイベントの詳細とコード例は「全角入力の開始と終了を検出する」をご覧ください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。