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
javascript
jquery
keyboard
David Zorychta
quelle
quelle
Antworten:
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 ...
quelle
doneTyping
im Beispiel sofort ausgeführt wird. Dies ist normalerweise das Ergebnis eines versehentlichen Einfügens()
nach dem Funktionsnamen. Beachten Sie, dass es lesen solltesetTimeout(doneTyping,
nichtsetTimeout(doneTyping(),
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.
Und der gleiche Code in der Vanille-JavaScript-Lösung:
Diese Lösung verwendet zwar ES6, ist hier jedoch nicht erforderlich. Ersetzen Sie einfach
let
mitvar
und die Pfeil - Funktion mit einer regulären Funktion.quelle
$('#myInput').on('input', function() {
Sie diese Option, wenn dies mit Kopieren und Einfügen funktionieren soll. Ich sehe den Punkt der Überprüfung nicht, wenn die Eingabe leer ist. Angenommen, er möchte löschen, was er eingegeben hat, wird der Ajax-Aufruf nicht ausgeführt.if ($('#myInput').val)
stattif ($('#myInput').val())
? Sollte.val
eine Funktion sein?Es ist nur eine Zeile mit der Entprellungsfunktion von underscore.js :
Dies sagt im Grunde doSomething 500 Millisekunden, nachdem ich aufgehört habe zu tippen.
Für weitere Informationen: http://underscorejs.org/#debounce
quelle
Uncaught ReferenceError: _ is not defined
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.
Hoffe das hilft,
Marko
quelle
vollständiges Beispiel hier: http://jsfiddle.net/ZYXp4/8/
quelle
Beide Top 2 Antworten funktionieren bei mir nicht. Also, hier ist meine Lösung:
quelle
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:
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!
quelle
Ändern der akzeptierten Antwort, um zusätzliche Fälle wie Einfügen zu behandeln:
quelle
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:
Es ist meine erste Antwort auf Stack Overflow, also hoffe ich, dass dies irgendwann jemandem hilft :)
quelle
Deklarieren Sie die folgende
delay
Funktion:und dann benutze es:
quelle
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.
quelle
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)
quelle
Ich denke, die Lösung ist mit der
input
Veranstaltung etwas einfacher :quelle
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
quelle
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;
Javascript-Code
quelle
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:
Sie werden feststellen, dass bei der Implementierung kein Timer verwendet werden muss.
quelle
Dies ist der einfache JS-Code, den ich geschrieben habe:
quelle
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.
quelle
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.
quelle
Wenn der Benutzer sich vom Feld entfernen muss, können wir "onBlur" anstelle von Onchange in Javascript verwenden
Wenn dies nicht erforderlich ist, ist die Einstellung des Timers die gute Option.
quelle
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.
quelle
Wenn Sie nach einer bestimmten Länge suchen (z. B. nach einem Postleitzahlfeld):
quelle
Ich bin mir nicht sicher, ob meine Bedürfnisse etwas seltsam sind, aber ich brauchte etwas Ähnliches und das habe ich letztendlich verwendet:
Was mir erlaubt, solche Elemente in meiner Anwendung zu haben:
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)
quelle
Wenn Sie warten müssen, bis der Benutzer mit der Eingabe fertig ist, verwenden Sie einfach Folgendes:
Vollständiges Beispiel mit Ajax-Aufruf - dies funktioniert für meinen Pager - Anzahl der Elemente pro Liste:
quelle
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:
Funktionsnutzung:
quelle
Einfach und leicht zu verstehen.
quelle
Zum Übergeben von Parametern an Ihre Funktion zusammen mit der ES6-Syntax.
quelle
Wow, sogar 3 Kommentare sind ziemlich richtig!
Eine leere Eingabe ist kein Grund, einen Funktionsaufruf zu überspringen, z. B. entferne ich den Abfallparameter vor der Umleitung aus der URL
.on ('input', function() { ... });
sollte Trigger verwendet werdenkeyup
,paste
undchange
Ereignissedefinitiv
.val()
oder.value
muss verwendet werdenSie können die
$(this)
Inside-Event-Funktion verwenden, anstatt#id
mit mehreren Eingaben zu arbeiten(meine Entscheidung) Ich verwende die anonyme Funktion anstelle von
doneTyping
insetTimeout
, 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
quelle
paste
, es wird nicht verwendetthis
usw. (Ich denke, es ist wichtig, aber ich möchte mich nicht in Tonnen von Kommentaren