全角入力の開始と終了を検出する

全角入力の開始と終了で発生するイベントについて

キーボードで日本を入力するときは全角入力を行いますが、変換するかどうかが未確定の状態で入力する状態になります。
そのような未確定状態の入力が開始されたときはイベント「compositionstart」が発生し、変換が完了して入力終了するタイミングにイベント「compositionend」が発生します。

この2つのイベントは変換のない半角英数字の入力では発生しません。

今回は例として、以下の1行フォームのHTMLを使って入力状態を確認していきます。

HTMLコード例

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

このフォームにあるid属性「input_name」に対して、上記の2つのイベントをイベントリスナーに登録します。

コード例

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

  // 1行テキストフォームのHTMLを取得
  var input_element = document.getElementById('input_name');

  // 入力開始
  input_element.addEventListener('compositionstart', function(){
      console.log("入力開始");
  });

  // 入力終了
  input_element.addEventListener('compositionend', function(){
    console.log("入力終了");
  });
});

このコードを実行すると、1行テキストに全角入力を開始するタイミングで「入力開始」、変換確定して入力が終わったタイミングで「入力終了」とコンソールにそれぞれ出力されます。

例として1行フォームに「今日は暑い」と入力するときに、「今日は」「暑い」と2回に分けて入力したときは、コンソールには「入力開始」「入力終了」「入力開始」「入力終了」と2回ずつ出力されます。

CompositionEventオブジェクトのdataオブジェクトを参照すると、全角入力の入力があるたびに入力内容を取得することができます。

上記のコードからイベント「compositionend」の箇所だけ修正します。
イベントリスナーで実行する処理に対して、CompositionEventオブジェクトを引数として渡して、処理の中でdataオブジェクトの値を取得してコンソールに出力します。

コード例

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

  // 1行テキストフォームのHTMLを取得
  var input_element = document.getElementById('input_name');

  // 入力開始
  input_element.addEventListener('compositionstart', function(){
      console.log("入力開始");
  });

  // 入力終了
  input_element.addEventListener('compositionend', function(e){
    console.log(e.data);
  });
});

こちらのコードを実行すると、全角入力を開始したときは先ほどと同様にコンソールに「入力開始」と出力され、入力完了したら入力した値がそのまま出力されます。
例えば「今日は暑い」を「今日は」「暑い」と2回に分けて入力したら、コンソールには「入力開始」「今日は」「入力開始」「暑い」と出力されます。

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

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