ユーザーがテキスト ボックスに入力を終えた後にのみ JavaScript を実行するにはどうすればよいですか?

ユーザーの入力完了時に JavaScript を実行

問題:

ユーザーがトリガーせずにテキスト ボックスへの入力を完了したことを検出しますすべてのキーストロークに対するアクション。これは、Enter ボタンを押す必要を回避しながら、不要な AJAX リクエストを最小限に抑えることを目的としています。

解決策:

ユーザーが入力を終了したタイミングを判断するには、タイマー ベースのというアプローチを採用することができます。 jQuery での動作は次のとおりです。

1. キーリリース時にタイマーを開始: ユーザーがキーを放すと、タイマーをトリガーして、定義された期間 (例: 5 秒) 待機します。 ).
2. キーを押したときにタイマーをクリア: ユーザーが別のキーを押した場合タイマーが期限切れになる前にキーを押すと、既存のタイマーがクリアされます。
3. 時間完了時に実行: それ以上キーを押さずにタイマーが期限切れになると、入力の終了を示します。 AJAX リクエストなど、目的のアクションを実行します。

コード例は次のとおりです:

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

// Keyup: Start Timer
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

// Keydown: Clear Timer
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

// Typing Completion: Execute Action
function doneTyping () {
  // Perform the intended action, e.g., AJAX request
}

このアプローチを実装すると、AJAX リクエストのパフォーマンスを最適化できます。追加のユーザー入力を必要とせずに周波数を設定できます。

以上がユーザーがテキスト ボックスに入力を終えた後にのみ JavaScript を実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。