In HTML5 wird der search
Eingabetyp mit einem kleinen X rechts angezeigt, das das Textfeld löscht (zumindest in Chrome, möglicherweise auch in anderen). Gibt es eine andere Möglichkeit, zu erkennen, wann auf dieses X in Javascript oder jQuery geklickt wird, als beispielsweise zu erkennen, wann auf das Kästchen überhaupt geklickt wird, oder eine Art Standort-Klickerkennung (x-Position / y-Position) durchzuführen?
javascript
jquery
html
events
dom-events
Jason
quelle
quelle
onchange
Ereignis?Antworten:
Tatsächlich gibt es ein "Such" -Ereignis, das ausgelöst wird, wenn der Benutzer sucht oder wenn der Benutzer auf das "x" klickt. Dies ist besonders nützlich, da es das "inkrementelle" Attribut versteht.
Nachdem ich das gesagt habe, bin ich mir nicht sicher, ob Sie den Unterschied zwischen dem Klicken auf das "x" und dem Suchen erkennen können, es sei denn, Sie verwenden einen "onclick" -Hack. In jedem Fall hilft dies hoffentlich.
quelle
search
Ereignis eintritt, außer wenn Sie auf das 'x' klicken. Es ist nicht zu feuern auf scheinenkeyup
,blur
oder wenn es bildet in vorgelegt. Dies verdient jedoch eine Antwort.search
Ereignis sollte ausgelöst werden, wenn der Benutzer drücktEnter
. Und wenn das Suchfeld dasincremental
Attribut hat, wird es auch ausgelöst, wenn der Benutzer für eine Sekunde aufhört zu tippen.input
Ereignis aus, aber nicht dassearch
Ereignis.Binden
search
Sie das Suchfeld wie unten angegeben.quelle
Ich möchte eine "späte" Antwort hinzufügen, weil ich mit und heute zu kämpfen
change
hatte , und vielleicht kann das, was ich am Ende gefunden habe, auch für andere nützlich sein. Grundsätzlich habe ich ein Suchfeld, und ich wollte nur richtig auf das Drücken des kleinen X reagieren (unter Chrome und Opera implementiert FF es nicht) und als Ergebnis einen Inhaltsbereich löschen.keyup
search
Ich hatte diesen Code:
(Sie sind getrennt, weil ich überprüfen wollte, wann und unter welchen Umständen jeder angerufen wurde).
Es stellt sich heraus, dass Chrome und Firefox unterschiedlich reagieren. Insbesondere behandelt Firefox
change
"jede Änderung an der Eingabe", während Chrome dies als "wenn der Fokus verloren geht UND der Inhalt geändert wird" behandelt. In Chrome wurde die Funktion "Update Panel" einmal aufgerufen, in FF zweimal für jeden Tastendruck (einer inkeyup
, einer inchange
).Wenn Sie das Feld mit dem kleinen X löschen (das unter FF nicht vorhanden ist), wurde das
search
Ereignis unter Chrome ausgelöst : Neinkeyup
, Neinchange
.Die Schlussfolgerung? Verwenden Sie
input
stattdessen:Es funktioniert unter allen von mir getesteten Browsern mit demselben Verhalten und reagiert bei jeder Änderung des Eingabeinhalts (Kopieren und Einfügen mit der Maus, automatische Vervollständigung und "X" eingeschlossen).
quelle
change
Ereignis genau wie Chrome. Es wird nur bei Eingabe ausgelöst oder der Fokus geht verloren.Mit Pauans Antwort ist es meistens möglich. Ex.
quelle
change
Veranstaltung erst imblur
Grunde genommen ausgelöst. Das einfache Klicken auf das(x)
Suchfeld von Chrome scheint für mich kein Ereignis auszulösen. Nach weiteren Nachforschungen (und Lesen der Kommentare unten) machte ichclick
mich an die Arbeit. Also$("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });
funktioniert an meinem Ende$("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });
würde auch ausgelöst werden, wenn der Benutzer klickt in das Eingabefeld ein .Ich weiß, dass dies eine alte Frage ist, aber ich habe nach einer ähnlichen Sache gesucht. Bestimmen Sie, wann auf das 'X' geklickt wurde, um das Suchfeld zu deaktivieren. Keine der Antworten hier hat mir überhaupt geholfen. Einer war nah dran, aber auch betroffen, wenn der Benutzer die Eingabetaste drückte, wurde das gleiche Ergebnis ausgelöst wie beim Klicken auf das "X".
Ich habe diese Antwort in einem anderen Beitrag gefunden und sie funktioniert perfekt für mich und wird nur ausgelöst, wenn der Benutzer das Suchfeld deaktiviert.
quelle
Es machte für mich Sinn, dass das Klicken auf das X als Änderungsereignis gelten sollte. Ich hatte bereits das onChange-Ereignis eingerichtet, um das zu tun, wofür ich es brauchte. Für mich bestand die Lösung darin, einfach diese jQuery-Zeile zu erstellen:
$('#search').click(function(){ $(this).change(); });
quelle
if (this.value === "") { ... }
Es scheint nicht so, als könnten Sie im Browser darauf zugreifen. Die Sucheingabe ist ein Webkit-HTML-Wrapper für das Cocoa NSSearchField. Die Schaltfläche Abbrechen scheint im Browser-Client-Code enthalten zu sein, ohne dass ein externer Verweis vom Wrapper verfügbar ist.
Quellen:
Sieht so aus, als müssten Sie es durch Klicken mit der Maus durch Folgendes herausfinden:
quelle
Ich habe diesen Beitrag gefunden und festgestellt, dass er etwas alt ist, aber ich glaube, ich habe eine Antwort. Dies behandelt das Klicken auf das Kreuz, das Zurücksetzen und das Drücken der ESC-Taste. Ich bin mir sicher, dass es wahrscheinlich besser geschrieben werden könnte - ich bin noch relativ neu in Javascript. Folgendes habe ich getan: Ich verwende jQuery (v1.6.4):
quelle
Versuchen Sie dies, hoffen Sie, Ihnen zu helfen
quelle
Ich glaube, dies ist die einzige Antwort, die NUR ausgelöst wird, wenn auf das x geklickt wird.
Es ist jedoch ein bisschen hackig und Ggutenbergs Antwort wird für die meisten Menschen funktionieren.
Wo
'#search-field'
ist der jQuery-Selektor für Ihre Eingabe? Verwenden Sie'input[type=search]'
diese Option, um alle Sucheingaben auszuwählen. Funktioniert durch Suchen nach einem Suchereignis (Pauans Antwort) unmittelbar nach einem Klick auf das Feld.quelle
Die vollständige Lösung finden Sie hier
Dadurch wird die Suche gelöscht, wenn auf Suche x geklickt wird. oder ruft den Such-API-Treffer auf, wenn der Benutzer die Eingabetaste drückt. Dieser Code kann mit einem zusätzlichen Esc Keyup Event Matcher erweitert werden. aber das sollte alles tun.
Prost.
quelle
Basierend auf der Ereignisschleife von js löst die
click
Schaltfläche zum Löschen einsearch
Ereignis bei der Eingabe aus , sodass der folgende Code wie erwartet funktioniert:Mit dem obigen Code onclick event wurde eine Ereignisschleife gebucht
this._cleared = false
, das Ereignis wird jedoch immer nach demonsearch
Ereignis ausgeführt, sodass Sie denthis._cleared
Status stabil überprüfen können, um festzustellen, ob der Benutzer nur auf dieX
Schaltfläche geklickt und dann einonsearch
Ereignis ausgelöst hat .Dies kann unter fast allen Bedingungen funktionieren , eingefügter Text , inkrementelle Attribute, ENTER / ESC- Tastendruck usw.
quelle
Hier ist eine Möglichkeit, dies zu erreichen. Sie müssen Ihrem HTML-Code ein inkrementelles Attribut hinzufügen, sonst funktioniert es nicht.
quelle
ECMASCRIPT 2016
quelle
Die Suche oder der Onclick funktioniert ... aber das Problem, das ich gefunden habe, war bei den älteren Browsern - die Suche schlägt fehl. Viele Plugins (JQuery UI Autocomplete oder Fancytree Filter) haben Unschärfe- und Fokus-Handler. Das Hinzufügen zu einem Eingabefeld für die automatische Vervollständigung hat bei mir funktioniert (verwendet this.value == "", da die Auswertung schneller war). Die Unschärfe und der Fokus hielten den Cursor im Feld, wenn Sie das kleine 'x' drücken.
Der PropertyChange und die Eingabe funktionierten sowohl für IE 10 und IE 8 als auch für andere Browser:
Für die FancyTree-Filtererweiterung können Sie eine Schaltfläche zum Zurücksetzen verwenden und das Klickereignis wie folgt erzwingen:
Sollte in der Lage sein, dies für die meisten Anwendungen anzupassen.
quelle
Wenn Sie auf die TextField-Schaltfläche (X) klicken, wird onmousemove () ausgelöst. Mit diesem Ereignis können Sie eine beliebige Funktion aufrufen.
quelle