Gibt es Ereignisse für die Reset-Option für die Eingabesuche?

In HTML5 gibt es einen neuen Eingabetyp, „Suche“. Bei den meisten Browsern bleibt es bei einer einfachen „Text“-Eingabe, aber bei Webkit-basierten Browsern fügt es ein kleines Kreuz hinzu, um die Eingabe zurückzusetzen.

Ich möchte damit umgehen können, gibt es dafür eine Veranstaltung?

Dies erwähnt einen Kommentar von Ajaxian (WebKit HTML5-Sucheingaben):

Es gibt auch einige benutzerdefinierte Ereignisse – wie „Suche“, die ausgelöst werden, wenn der Benutzer die Eingabe unterbricht (setzen Sie „Incremental“ auf „true“).

Beim Testen habe ich festgestellt, dass dieses „Such“-Ereignis auch aufgerufen wird, wenn die Eingabe gelöscht wird (zumindest in der neuesten Version von Safari).

Miketaylr scheint Recht zu haben, es ist nicht möglich, dieses Ereignis abzufangen. Sehen Sie sich die Antwort auf diese Frage an: Wie erkennen Sie das Löschen einer „Suche“-HTML5-Eingabe?

Um standardkonform zu sein und sich nicht auf eine Funktion einer Layout-Engine zu verlassen, schlage ich vor, dass Sie Ihren Code auf einem ausführen onChange Ereignis, wenn der neue Textwert leer ist.

Nein, es ist nicht möglich. Diese UI-Interaktion ist etwas Gutes, das Webkit implementiert, aber nicht wirklich spezifiziert ist. Sehen hier. Also, selbst wenn es möglich wäre – Sie können nicht erwarten, dass diese Benutzeroberfläche beispielsweise in Gecko implementiert wird, falls und wenn sie jemals type=search hinzufügen.

Sie können auch auf das “input”-Ereignis lauschen, das ist allgemeiner als das “search”-Ereignis, fängt aber immer noch die Reset-Option ab.

Ich weiß nicht, dass dies der ist Korrekt Antwort, aber die click Der Ereignishandler wird aufgerufen, wenn der Benutzer die Eingabe mit der X-Schaltfläche löscht.

$('input[type="search"]').click(function(event) {
    // This code runs anytime a user clicks on the input,
    // including when they clear it using the X button.
})

Bin mir nicht sicher, ob noch jemand nach einer Lösung sucht. Das folgende Code-Snippet/Tricks funktionierte jedoch für mich. CSS zum vollständigen Ausblenden der Löschen (X)-Symbol und wenn du das nicht verstecken willst Löschen (X)-Symbol aber müssen Sie dann JS-Code-Snippet handhaben, würde helfen.

CSS-Trick:

#textFieldId::-ms-clear {display: none;} — Für ein bestimmtes Textfeld

oder

input[type=text]::-ms-clear { display: none; } — für alle Textfelder im Geltungsbereich

ODER

JavaScript-Trick (um den Textfeldwert auf leer/leer zurückzusetzen und das HTML-Ereignis KeyUp auszulösen. Dementsprechend können Sie es nach Bedarf ändern)

$('#textFieldId').bind("mouseup", function() {
        var $input = $(this);
        var oldValue = $input.val();
        if (oldValue == "") {
            return;
        }
        setTimeout(function() {
            var newValue = $input.val();
            if (newValue == "") {
                $input.trigger("keyup");
            }
        }, 1);
    });

Sie könnten eine Bedingung hinzufügen, um zu prüfen, ob der Inhalt des Suchfelds leer ist, aber das ist alles nicht gut, selbst mit einer Zeitüberschreitung, da es zuerst den Code ausführt und dann das Feld löscht. Das andere Problem ist, dass der Code nicht auf die Schließen-Schaltfläche reagiert, wenn Sie das Feld bearbeiten