[解決済み] キーアップ時ではなく、入力終了時に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
}
関連
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み] [Solved] ユーザーの入力が終わるまで、.keyup()ハンドラを遅延させる方法は?
-
[解決済み】ユーザーが一番下までスクロールしたかどうかを確認する(ウィンドウだけでなく、任意の要素)【重複】。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vueの要素ツリーコントロールに破線を追加する説明
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueのグローバルがscss(mixin)を導入。
-
vueディレクティブv-bindの使用と注意点
-
Vueでルートネスティングを実装する例
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み] [Solved] ユーザーの入力が終わるまで、.keyup()ハンドラを遅延させる方法は?
-
[解決済み] jQueryで<input type="text">のonchangeを実装するには?