it-swarm.com.de

Wie löse ich ein Ereignis im Eingabetext aus, nachdem ich das Schreiben beendet habe?

Ich möchte ein Ereignis auslösen, nachdem ich die Eingabe von Zeichen (nicht während der Eingabe) in mein Eingabetextfeld beendet habe.

Ich habe versucht mit:

$('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);
});

Dieses Beispiel führt jedoch zu einem Timeout für jedes eingegebene Zeichen, und ich bekomme etwa 20 AJAX - Anforderungen, wenn ich 20 Zeichen eingebe.

Auf dieser Geige Ich demonstriere dasselbe Problem mit einer einfachen Warnung anstelle eines AJAX.

Gibt es dafür eine Lösung oder verwende ich nur einen schlechten Ansatz dafür?

70
user1386320

Sie müssen eine setTimeout (wie Sie) verwenden, aber auch die Referenz speichern, damit Sie das Limit immer wieder zurücksetzen können. So etwas wie:

//
// $('#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>

Das wird ausgeführt, wenn:

  1. Das Timeout ist abgelaufen, oder
  2. Der Benutzer hat die Felder gewechselt (blur Ereignis)

(Welches auch immer zuerst kommt)

154
Brad Christie

LÖSUNG:

Hier ist die Lösung. Ausführen einer Funktion, nachdem der Benutzer eine bestimmte Zeit lang keine Eingabe mehr vorgenommen hat:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})();

Verwendungszweck

$('input').keyup(function() {
  delay(function(){
    alert('Hi, func called');
  }, 1000 );
});
60
Ata ul Mustafa

Sie können underscore.js "debounce" verwenden

$('input#username').keypress( _.debounce( function(){<your ajax call here>}, 500 ) );

Dies bedeutet, dass Ihr Funktionsaufruf nach 500 ms Tastendruck ausgeführt wird. Wenn Sie jedoch vor den 500ms eine andere Taste drücken (ein anderes Tastendruckereignis wird ausgelöst), wird die vorherige Funktionsausführung ignoriert (entprellt) und die neue wird nach einem neuen 500ms-Timer ausgeführt.

Für zusätzliche Informationen würde Mit _.debounce (func, timer, true ) bedeuten, dass die erste Funktion ausgeführt wird und alle anderen Tastendruckereignisse mit nachfolgenden 500ms-Timern ignoriert werden.

15
ScorpionKing2k5

Sie müssen entprellen!

Hier ist ein jQuery Plugin , und hier ist alles, was Sie über debounce wissen müssen. Wenn Sie von Google hierher kommen und Underscore den Weg in die JSoup Ihrer App gefunden hat, hat sie direkt in gebacken!

9
Ziggy

gereinigte Lösung:

$.fn.donetyping = function(callback, delay){
  delay || (delay = 1000);
  var timeoutReference;
  var doneTyping = function(elt){
    if (!timeoutReference) return;
    timeoutReference = null;
    callback(elt);
  };

  this.each(function(){
    var self = $(this);
    self.on('keyup',function(){
      if(timeoutReference) clearTimeout(timeoutReference);
      timeoutReference = setTimeout(function(){
        doneTyping(self);
      }, delay);
    }).on('blur',function(){
      doneTyping(self);
    });
  });

  return this;
};
5
Matrix

Es gibt einige einfache plugin die ich gemacht habe, die genau das tun. Es erfordert viel weniger Code als die vorgeschlagenen Lösungen und ist sehr leicht (~ 0,6 kb).

Zuerst erstellen Sie ein Bid-Objekt, das jederzeit bumped sein kann. Jeder Bump verzögert das Auslösen von Bid Callback für die nächste gegebene Zeitspanne.

var searchBid = new Bid(function(inputValue){
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms

Wenn das Bid-Objekt fertig ist, müssen wir es irgendwie bump. Verbinden Sie uns mit keyupevent.

$("input").keyup(function(){
    searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});

Was passiert hier ist:

Jedes Mal, wenn der Benutzer die Taste drückt, wird das Gebot um 200 ms verzögert. Wenn 200 ms vergehen, ohne erneut "gestoßen" zu werden, wird der Rückruf ausgelöst.

Außerdem haben Sie zwei zusätzliche Funktionen, um das Gebot zu stoppen (wenn der Benutzer beispielsweise die ESC-Taste gedrückt oder auf eine externe Eingabe geklickt hat) und um den Callback sofort zu beenden und auszulösen (z. B. wenn der Benutzer die Eingabetaste drückt):

searchBid.stop();
searchBid.finish(valueToPass);
3
pie6k

Ich habe nach einem einfachen HTML/JS-Code gesucht und keinen gefunden. Dann habe ich den Code mit onkeyup="DelayedSubmission()" geschrieben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>

Sie sollten setTimeout einer Variablen zuweisen und clearTimeout verwenden, um sie bei Tastendruck zu löschen.

var timer = '';

$('input#username').keypress(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    //Your code here
    //Your code here
  }, 3000); //Waits for 3 seconds after last keypress to execute the above lines of code
});

Fiddle

Hoffe das hilft.

0
Gibin Ealias

Warum machen Sie so viel, wenn Sie nur eine Uhr zurücksetzen möchten?

var clockResetIndex = 0 ;
// this is the input we are tracking
var tarGetInput = $('input#username');

tarGetInput.on( 'keyup keypress paste' , ()=>{
    // reset any privious clock:
    if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

    // set a new clock ( timeout )
    clockResetIndex = setTimeout(() => {
        // your code goes here :
        console.log( new Date() , tarGetInput.val())
    }, 1000);
});

wenn Sie an WordPress arbeiten, müssen Sie den gesamten Code darin einbindeneiner jQuery-Block:

jQuery(document).ready(($) => {
    /**
     * @name 'navSearch' 
     * @version 1.0
     * Created on: 2018-08-28 17:59:31
     * GMT+0530 (India Standard Time)
     * @author : ...
     * @description ....
     */
        var clockResetIndex = 0 ;
        // this is the input we are tracking
        var tarGetInput = $('input#username');

        tarGetInput.on( 'keyup keypress paste' , ()=>{
            // reset any privious clock:
            if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

            // set a new clock ( timeout )
            clockResetIndex = setTimeout(() => {
                // your code goes here :
                console.log( new Date() , tarGetInput.val())
            }, 1000);
        });
});
0
insCode