1. ホーム
  2. javascript

[解決済み] キーアップ時ではなく、入力終了時にjavascriptの関数を実行しますか?

2022-03-17 18:41:29

質問

ユーザーがテキストボックスへの入力を終了したときに、ajaxリクエストを発生させたい。ユーザーが文字を入力するたびに関数を実行するのは、ajaxリクエストが大量に発生するので避けたいのですが、エンターボタンも押させたくないのです。

ユーザーが入力を終えたことを検知して、ajax リクエストを実行する方法はありますか?

ここではjQueryを使用しています デイブ

解決方法は?

つまり、タイピングを終えるということは、しばらく、たとえば5秒間、タイピングを止めるということなのでしょう。 そう考えて、ユーザーがキーを離したときにタイマーをスタートさせ、キーを押したときにクリアするようにしよう。 問題の入力は、#myInputとすることにした。

少し仮定してみると...。

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}