JavaScriptで最後のキー入力の時だけイベントを発生させる方法

2016 / 8 / 2 2016 / 8 / 7

JavaScript

＊
はじめに!!

お疲れ様です！ぴーすけです！

ユーザのキー入力が終わったタイミングでのみ発生する処理の記述方法をご紹介します！

＊
普通にやるとこうなっちゃう!!

以下のインプットに文字を入力してみてください。入力ごとにイベントが走ります。

DEMO:

<input type="text" id="text1">

document.getElementById('text1').addEventListener('keyup', function() {
    alert("キー入力");
});

これでもいい場合は多いですが、少ししつこいので入力が完了した後に１回だけイベントを発生させるようにします。

＊
入力が最後かどうかを確かめる方法!!

以下のインプットに文字を入力してみてください。ユーザが入力完了を判断してイベントが走ります。

DEMO:

<input type="text" id="text2">

var stack = [];//入力数を保存する変数
document.getElementById('text2').addEventListener('keyup', function() {
  stack.push(1);//入力ごとに値を追加する

  //入力後0.3秒後
  setTimeout(function() {
    stack.pop();//中身を一つ取り出す

    //取り出したstackの中身がなければ処理をする
    //stackの中身がなくなるのは、一番最後の入力から0.3秒後になる
    //なので、一番最後の入力から0.3秒後に以下の処理が走る
    if (stack.length == 0) {
      //最後キー入力後に処理したいイベント
      alert("キー完了");
      stack = [];//一応stackを初期化
    }
  }, 300);
});

コメントにも記述しましたが、解説をします。

「stack」というユーザの入力数を保存する変数を用意します。そして、キー入力がある度にこの変数に値を追加します。

そして、キー入力の0.3秒後にその中身を取り出します。そして取り出した後のstackの中身が何も入っていなければ、処理をするという動きになっています。（上記の場合はアラートを表示）

つまり、入力と入力の間に0.3秒の間があればstackの値は空にならないので、イベントが発生しないのです。

この0.3秒という値を変更すれば、入力が遅い人にも対応できるので、調整してみてください。