Führen Sie die Javascript-Funktion aus, wenn der Benutzer die Eingabe beendet hat, anstatt die Taste zu drücken.

Ich möchte eine Ajax-Anfrage auslösen, wenn der Benutzer die Eingabe in ein Textfeld beendet hat. Ich möchte nicht, dass die Funktion jedes Mal ausgeführt wird, wenn der Benutzer einen Buchstaben eingibt, da dies zu VIELEN Ajax-Anforderungen führen würde. Ich möchte jedoch nicht, dass sie auch die Eingabetaste drücken müssen.

Gibt es eine Möglichkeit, um zu erkennen, wann der Benutzer mit der Eingabe fertig ist, und dann die Ajax-Anforderung auszuführen?

Verwenden Sie jQuery hier! Dave

Ich gehe also davon aus, dass Sie mit dem Tippen fertig sind und nur eine Weile innehalten, sagen wir 5 Sekunden. Lassen Sie uns in diesem Sinne einen Timer starten, wenn der Benutzer eine Taste loslässt, und ihn löschen, wenn er eine Taste drückt. Ich entschied, dass die fragliche Eingabe #myInput sein wird.

Ein paar Annahmen machen ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second 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
}

Die oben gewählte Antwort funktioniert nicht.

Da typingTimer gelegentlich mehrmals eingestellt wird (zweimaliges Drücken der Taste, bevor der Keydown für schnelle Tipper usw. ausgelöst wird), wird es nicht richtig gelöscht.

Die folgende Lösung löst dieses Problem und ruft X Sekunden nach Abschluss des OP auf. Außerdem ist die redundante Keydown-Funktion nicht mehr erforderlich. Ich habe auch eine Prüfung hinzugefügt, damit Ihr Funktionsaufruf nicht erfolgt, wenn Ihre Eingabe leer ist.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

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

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

Und der gleiche Code in der Vanille-JavaScript-Lösung:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

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

Diese Lösung verwendet zwar ES6, ist hier jedoch nicht erforderlich. Ersetzen Sie einfach letmit varund die Pfeil - Funktion mit einer regulären Funktion.

Es ist nur eine Zeile mit der Entprellungsfunktion von underscore.js :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Dies sagt im Grunde doSomething 500 Millisekunden, nachdem ich aufgehört habe zu tippen.

Für weitere Informationen: http://underscorejs.org/#debounce

Ja, Sie können für jedes Key-Up-Ereignis eine Zeitüberschreitung von beispielsweise 2 Sekunden festlegen, die eine Ajax-Anforderung auslöst. Sie können die XHR-Methode auch speichern und bei nachfolgenden Tastendruckereignissen abbrechen, um noch mehr Bandbreite zu sparen. Hier ist etwas, das ich für ein Autocomplete-Skript von mir geschrieben habe.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

Hoffe das hilft,

Marko

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

vollständiges Beispiel hier: http://jsfiddle.net/ZYXp4/8/

Beide Top 2 Antworten funktionieren bei mir nicht. Also, hier ist meine Lösung:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

Ich mag die Antwort von Surreal Dream, aber ich habe festgestellt, dass meine Funktion "doneTyping" bei jedem Tastendruck ausgelöst wird, dh wenn Sie sehr schnell "Hallo" eingeben. Anstatt nur einmal zu feuern, wenn Sie aufhören zu tippen, wird die Funktion fünfmal ausgelöst.

Das Problem war, dass die Javascript-Funktion setTimeout die alten Timeouts, die eingestellt wurden, nicht zu überschreiben oder zu beenden scheint, aber wenn Sie es selbst tun, funktioniert es! Also habe ich kurz vor dem setTimeout einen clearTimeout-Aufruf hinzugefügt, wenn der typingTimer gesetzt ist. Siehe unten:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

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

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

NB Ich hätte dies gerne als Kommentar zu Surreal Dreams Antwort hinzugefügt, aber ich bin ein neuer Benutzer und habe nicht genug Ruf. Es tut uns leid!

Ändern der akzeptierten Antwort, um zusätzliche Fälle wie Einfügen zu behandeln:

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

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

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

Ich denke nicht, dass ein keyDown-Ereignis in diesem Fall erforderlich ist (bitte sagen Sie mir, warum, wenn ich falsch liege). In meinem (nicht jquery) Skript sieht eine ähnliche Lösung so aus:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

Es ist meine erste Antwort auf Stack Overflow, also hoffe ich, dass dies irgendwann jemandem hilft :)

Deklarieren Sie die folgende delayFunktion:

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

und dann benutze es:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

Späte Antwort, aber ich füge sie hinzu, weil es 2019 ist und dies mit hübschem ES6, keinen Bibliotheken von Drittanbietern, vollständig erreichbar ist. Ich finde, dass die meisten der hoch bewerteten Antworten sperrig und mit zu vielen Variablen belastet sind.

Elegante Lösung aus diesem ausgezeichneten Blog-Beitrag.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

Genau genommen nein, da der Computer nicht erraten kann, wann der Benutzer mit der Eingabe fertig ist. Sie können natürlich einen Timer beim Hochfahren starten und ihn bei jedem weiteren Tastendruck zurücksetzen. Wenn der Timer abläuft, hat der Benutzer die Timer-Dauer nicht eingegeben - Sie können dies als "abgeschlossene Eingabe" bezeichnen.

Wenn Sie erwarten, dass Benutzer während der Eingabe Pausen einlegen, können Sie nicht wissen, wann sie fertig sind.

(Es sei denn natürlich, Sie können anhand der Daten erkennen, wann sie fertig sind)

Ich denke, die Lösung ist mit der inputVeranstaltung etwas einfacher :

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

stimme der Antwort von @going zu. Eine andere ähnliche Lösung, die für mich funktioniert hat, ist die folgende. Der einzige Unterschied ist, dass ich .on ("input" ...) anstelle von keyup verwende. Dies erfasst nur Änderungen in der Eingabe. andere Tasten wie Strg, Umschalt usw. werden ignoriert

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});

Ich habe gerade einen einfachen Code gefunden, der darauf wartet, dass der Benutzer die Eingabe beendet:

Schritt 1. Setzen Sie das Zeitlimit auf Null und löschen Sie das aktuelle Zeitlimit, wenn der Benutzer tippt.

Schritt 2.Tigger Clear Timeout für die Variable definieren, bevor das Keyup-Ereignis ausgelöst wird.

Schritt 3. Zeitlimit für die oben deklarierte Variable definieren;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

Javascript-Code

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

Ich habe die Suche in meinem Eintrag implementiert und musste sie auf Ajax basieren. Das bedeutet, dass bei jeder Schlüsseländerung die gesuchten Ergebnisse aktualisiert und angezeigt werden sollten. Dies führt dazu, dass so viele Ajax-Anrufe an den Server gesendet werden, was nicht gut ist.

Nach einiger Arbeit habe ich versucht, den Server zu pingen, wenn der Benutzer aufhört zu tippen.

Diese Lösung hat bei mir funktioniert:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Sie werden feststellen, dass bei der Implementierung kein Timer verwendet werden muss.

Dies ist der einfache JS-Code, den ich geschrieben habe:

<!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>

Mit dem Ereignis onblur können Sie feststellen, wann das Textfeld den Fokus verliert: https://developer.mozilla.org/en/DOM/element.onblur

Dies ist nicht dasselbe wie "hört auf zu tippen", wenn Sie sich für den Fall interessieren, dass der Benutzer eine Reihe von Dingen eingibt und dann dort sitzt, wobei das Textfeld immer noch fokussiert ist.

Zu diesem Zweck würde ich vorschlagen, ein setTimeout mit dem Ereignis onclick zu verknüpfen und davon auszugehen, dass der Benutzer nach x Zeit ohne Tastenanschläge die Eingabe beendet hat.

Warum nicht einfach onfocusout verwenden?

https://www.w3schools.com/jsreF/event_onfocusout.asp

Wenn es sich um ein Formular handelt, verlassen sie immer den Fokus jedes Eingabefelds, um auf die Schaltfläche "Senden" zu klicken, damit Sie wissen, dass keine Eingabe den Aufruf des Ereignishandlers "onfocusout" verpasst.

Wenn der Benutzer sich vom Feld entfernen muss, können wir "onBlur" anstelle von Onchange in Javascript verwenden

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Wenn dies nicht erforderlich ist, ist die Einstellung des Timers die gute Option.

Sobald Sie den Fokus auf das Textfeld erkannt haben, führen Sie bei der Eingabe eine Zeitüberschreitungsprüfung durch und setzen Sie sie jedes Mal zurück, wenn sie ausgelöst wird.

Wenn das Zeitlimit abgelaufen ist, führen Sie Ihre Ajax-Anfrage aus.

Wenn Sie nach einer bestimmten Länge suchen (z. B. nach einem Postleitzahlfeld):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });

Ich bin mir nicht sicher, ob meine Bedürfnisse etwas seltsam sind, aber ich brauchte etwas Ähnliches und das habe ich letztendlich verwendet:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Was mir erlaubt, solche Elemente in meiner Anwendung zu haben:

<input type="text" data-url="/controller/action/" class="update">

Welche werden aktualisiert, wenn der Benutzer "fertig tippt" (2 Sekunden lang keine Aktion) oder in ein anderes Feld wechselt (Unschärfe aus dem Element heraus)

Wenn Sie warten müssen, bis der Benutzer mit der Eingabe fertig ist, verwenden Sie einfach Folgendes:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Vollständiges Beispiel mit Ajax-Aufruf - dies funktioniert für meinen Pager - Anzahl der Elemente pro Liste:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    

Mehrere Timer pro Seite

Alle anderen Antworten funktionieren nur für ein Steuerelement ( meine andere Antwort enthalten). Wenn Sie mehrere Steuerelemente pro Seite haben (z. B. in einem Warenkorb), wird nur das letzte Steuerelement aufgerufen, bei dem der Benutzer etwas eingegeben hat . In meinem Fall ist dies sicherlich nicht das gewünschte Verhalten - jedes Steuerelement sollte seinen eigenen Timer haben.

Um dies zu lösen, müssen Sie lediglich eine ID an die Funktion übergeben und ein timeoutHandles-Wörterbuch wie im folgenden Code verwalten:

Funktionserklärung:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Funktionsnutzung:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);

Einfach und leicht zu verstehen.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

Zum Übergeben von Parametern an Ihre Funktion zusammen mit der ES6-Syntax.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Wow, sogar 3 Kommentare sind ziemlich richtig!

1. Eine leere Eingabe ist kein Grund, einen Funktionsaufruf zu überspringen, z. B. entferne ich den Abfallparameter vor der Umleitung aus der URL

2. .on ('input', function() { ... });sollte Trigger verwendet werden keyup, pasteund changeEreignisse

3. definitiv .val()oder .valuemuss verwendet werden

4. Sie können die $(this)Inside-Event-Funktion verwenden, anstatt #idmit mehreren Eingaben zu arbeiten

5. (meine Entscheidung) Ich verwende die anonyme Funktion anstelle von doneTypingin setTimeout, um $(this)von n.4 aus leicht darauf zugreifen zu können, aber Sie müssen sie zuerst wie speichernvar $currentInput = $(this);

BEARBEITEN Ich sehe, dass einige Leute Anweisungen nicht verstehen, ohne die Möglichkeit, fertigen Code zu kopieren und einzufügen. Hier bist du

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});