[解決済み] 入力/書き込みを停止した後に入力テキストにイベントを発生させるには?
2023-04-13 13:32:52
質問
テキストボックスへの文字入力を停止した直後にイベントを発生させたいのですが、どうすればよいでしょうか。
で試してみました。
$('input#username').keypress(function() {
var _this = $(this); // copy of this object for further usage
setTimeout(function() {
$.post('/ajax/fetch', {
type: 'username',
value: _this.val()
}, function(data) {
if(!data.success) {
// continue working
} else {
// throw an error
}
}, 'json');
}, 3000);
});
しかし、この例では入力された文字ごとにタイムアウトが発生し、20文字を入力すると約20のAJAXリクエストが発生します。
このフィドルでは AJAXの代わりに単純なアラートで同じ問題を実証しています。
このための解決策はありますか、それとも私はこれのために悪いアプローチを使用しているだけですか?
どのように解決するのですか?
を使用する必要があります。
setTimeout
(を使用する必要がありますが、制限をリセットし続けることができるように、参照も保存します。のようなものです。
//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
// @callback: function to be called when even triggers
// @timeout: (default=1000) timeout, in ms, to to wait before triggering event if not
// caused by blur.
// Requires jQuery 1.7+
//
;(function($){
$.fn.extend({
donetyping: function(callback,timeout){
timeout = timeout || 1e3; // 1 second default timeout
var timeoutReference,
doneTyping = function(el){
if (!timeoutReference) return;
timeoutReference = null;
callback.call(el);
};
return this.each(function(i,el){
var $el = $(el);
// Chrome Fix (Use keyup over keypress to detect backspace)
// thank you @palerdot
$el.is(':input') && $el.on('keyup keypress paste',function(e){
// This catches the backspace button in chrome, but also prevents
// the event from triggering too preemptively. Without this line,
// using tab/shift+tab will make the focused element fire the callback.
if (e.type=='keyup' && e.keyCode!=8) return;
// Check if timeout has been set. If it has, "reset" the clock and
// start over again.
if (timeoutReference) clearTimeout(timeoutReference);
timeoutReference = setTimeout(function(){
// if we made it here, our timeout has elapsed. Fire the
// callback
doneTyping(el);
}, timeout);
}).on('blur',function(){
// If we can, fire the event since we're leaving the field
doneTyping(el);
});
});
}
});
})(jQuery);
$('#example').donetyping(function(){
$('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="example" />
<p id="example-output">Nothing yet</p>
という時に実行されます。
- タイムアウトが経過したとき、または
-
ユーザがフィールドを切り替えた (
blur
イベント)
(どちらか先に来た方)
関連
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] スクロールした後に要素が表示されているかどうかを確認するには?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する
-
[解決済み】HTMLのテキスト入力で数値入力しかできない。
-
[解決済み] [Solved] ユーザーの入力が終わるまで、.keyup()ハンドラを遅延させる方法は?
-
[解決済み】JavaScriptでウィンドウのリサイズイベントをトリガーする方法は?
-
[解決済み】jQuery:keyPress Backspaceが発射されない?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught SyntaxError: 予期しない入力の終了
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] キーアップ時ではなく、入力終了時にjavascriptの関数を実行しますか?
-
[解決済み] jQueryを使用してテキストボックスの値を取得するには?
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] JSONPとは何か、素人目にもわかるように説明してくれる人はいませんか?[重複)。
-
[解決済み] val()を使ってselectの値を設定しても、jqueryのchangeイベントが発生しないのはなぜですか?
-
[解決済み】jQueryがリクエストボディに有効なjsonを投稿する。
-
[解決済み] jQuery append() - 追記された要素を返す