Wie erkennt man das Löschen einer HTML5-Eingabe für die Suche?

153

In HTML5 wird der searchEingabetyp 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
Ich weiß nicht viel über HTML 5, aber hat es kein onchangeEreignis?
— Pekka
1
Nun, Sie könnten herausfinden, ob das Suchfeld auf diese Weise gelöscht wird, aber nicht, ob es aufgrund des
— Klickens
— Naftali aka Neal
Mögliche Antwort stackoverflow.com/a/59389615/11973798 Überprüfen Sie, ob es hilft
— Shubham Khare
Sie sollten Keyup- und Suchereignisse hinzufügen.
— Burak Öztürk

Antworten:

103

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.

Verweise:

http://help.dottoro.com/ljdvxmhr.php

— Pauan
quelle
2
Vielen Dank, ich kann nicht herausfinden, wann ein searchEreignis eintritt, außer wenn Sie auf das 'x' klicken. Es ist nicht zu feuern auf scheinen keyup, bluroder wenn es bildet in vorgelegt. Dies verdient jedoch eine Antwort.
— Maksim Vi.
4
Das searchEreignis sollte ausgelöst werden, wenn der Benutzer drückt Enter. Und wenn das Suchfeld das incrementalAttribut hat, wird es auch ausgelöst, wenn der Benutzer für eine Sekunde aufhört zu tippen.
— Pauan
5
Zu Ihrer Information: Zum Zeitpunkt des Schreibens dieses Kommentars funktioniert dies nur in Chrome.
— Jason
4
IE11 löst das inputEreignis aus, aber nicht das searchEreignis.
— Joseph Lennox
1
Das "Such" -Ereignis ist nicht Standard. Sehen Sie das . Ich würde die Verwendung ohne Poly-Fill nicht empfehlen.
— Stapelhaus
59

Binden searchSie das Suchfeld wie unten angegeben.

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});
— Sharad Biradar
quelle
1
Dies ist die richtige Antwort für diejenigen, die sich nicht sicher sind
— Erik Grosskurth
6
Gut zu wissen, dass ein Suchereignis in Chrome unterstützt wird, jedoch nicht in IE oder FF. Laut MDN handelt es sich um eine nicht standardmäßige Funktion, die nicht im Standardbereich enthalten ist. developer.mozilla.org/en-US/docs/Web/Events/search
— Rich Finelli
50

Ich möchte eine "späte" Antwort hinzufügen, weil ich mit und heute zu kämpfen changehatte , 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.keyupsearch

Ich hatte diesen Code:

 $(some-input).keyup(function() { 
    // update panel
 }
 $(some-input).change(function() { 
    // update panel
 }
 $(some-input).on("search", function() { 
    // update panel
 }

(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 in keyup, einer in change).

Wenn Sie das Feld mit dem kleinen X löschen (das unter FF nicht vorhanden ist), wurde das searchEreignis unter Chrome ausgelöst : Nein keyup, Nein change.

Die Schlussfolgerung? Verwenden Sie inputstattdessen:

 $(some-input).on("input", function() { 
    // update panel
 }

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).

— Lorenzo Dematté
quelle
1
Danke Lorenzo ... das war sehr hilfreich.
— Sterling Bourne
2
Genial, einfach genial. Vielen Dank, ich habe Zeit gespart, um dies herauszufinden.
— user2029541
Es scheint, dass Firefox sein Verhalten seitdem geändert hat? Ich habe mit Firefox 42.0 getestet und es behandelt das changeEreignis genau wie Chrome. Es wird nur bei Eingabe ausgelöst oder der Fokus geht verloren.
— Suzana
Ich mag die Option on input ... schön!
— Cam Tullos
14

Mit Pauans Antwort ist es meistens möglich. Ex.

<head>
    <script type="text/javascript">
        function OnSearch(input) {
            if(input.value == "") {
                alert("You either clicked the X or you searched for nothing.");
            }
            else {
                alert("You searched for " + input.value);
            }
        }
    </script>
</head>
<body>
    Please specify the text you want to find and press ENTER!
    <input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
— ggutenberg
quelle
5
Für mich wird die changeVeranstaltung erst im blurGrunde 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 ich clickmich an die Arbeit. Also $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });funktioniert an meinem Ende
— Jannis
2
Aber $("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 .
— Scott
8

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.

$("input").bind("mouseup", function(e){
   var $input = $(this),
   oldValue = $input.val();

   if (oldValue == "") return;

   // When this event is fired after clicking on the clear button
   // the value is not cleared yet. We have to wait for it.
   setTimeout(function(){
     var newValue = $input.val();

      if (newValue == ""){
         // capture the clear
         $input.trigger("cleared");
      }
    }, 1);
});
— lostInTheTetons
quelle
5

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

— Cory Gagliardi
quelle
Wenn Sie möchten, dass dies ausgelöst wird, wenn die Löschtaste gedrückt wird, können Sie auch eine Überprüfung des Eingabewerts hinzufügen, ua Jannis 'Kommentar unten: stackoverflow.com/questions/2977023/…if (this.value === "") { ... }
— Sam
4

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:

$('input[type=search]').bind('click', function(e) {
  var $earch = $(this);
  var offset = $earch.offset();

  if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
    // your code here
  }
});
— mVChr
quelle
Nun, das ist scheiße. Vielleicht gehe ich mit Plan B, der ein Ereignis auf Klick ausgeführt hat, wenn die Eingabe jetzt leer ist ... Vielleicht stelle ich es auf einen 25-ms-Timer
— Jason
@ Jason ja, und Sie können den oben angegebenen Code verwenden, um ihn nur auszuführen, wenn der Klick in dem Bereich aufgetreten ist, in dem sich das X befindet. Das zusätzlich zur Überprüfung, ob die Eingabe leer ist, wie Sie sagten, sollte ausreichen
— mVChr
1

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):

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});
— ScottG
quelle
Sieht aus wie filterVal nicht definiert ist
— dlsso
1

Versuchen Sie dies, hoffen Sie, Ihnen zu helfen

$("input[name=search-mini]").on("search", function() {
  //do something for search
});
— Don Zanurano
quelle
1

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.

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

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.

— dlsso
quelle
1

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.

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

Prost.

— Tarandeep Singh
quelle
1

Basierend auf der Ereignisschleife von js löst die clickSchaltfläche zum Löschen ein searchEreignis bei der Eingabe aus , sodass der folgende Code wie erwartet funktioniert:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

Mit dem obigen Code onclick event wurde eine Ereignisschleife gebucht this._cleared = false, das Ereignis wird jedoch immer nach dem onsearchEreignis ausgeführt, sodass Sie den this._clearedStatus stabil überprüfen können, um festzustellen, ob der Benutzer nur auf die XSchaltfläche geklickt und dann ein onsearchEreignis ausgelöst hat .

Dies kann unter fast allen Bedingungen funktionieren , eingefügter Text , inkrementelle Attribute, ENTER / ESC- Tastendruck usw.

— James Yang
quelle
1

Hier ist eine Möglichkeit, dies zu erreichen. Sie müssen Ihrem HTML-Code ein inkrementelles Attribut hinzufügen, sonst funktioniert es nicht.

window.onload = function() {
  var tf = document.getElementById('textField');
  var button = document.getElementById('b');
  button.disabled = true;
  var onKeyChange = function textChange() {
    button.disabled = (tf.value === "") ? true : false;
  }
  tf.addEventListener('keyup', onKeyChange);
  tf.addEventListener('search', onKeyChange);

}
<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>
Erweitern Sie das Snippet

— Revanth
quelle
1 
document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMASCRIPT 2016

— Realmag777
quelle
0

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:

$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});

Für die FancyTree-Filtererweiterung können Sie eine Schaltfläche zum Zurücksetzen verwenden und das Klickereignis wie folgt erzwingen:

var TheFancyTree = $("#FancyTreeID").fancytree("getTree");

$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
    var n,
    leavesOnly = false,
    match = $(this).val();
    // check for the escape key or empty filter
    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("button#btnResetSearch").click();
        return;
    }

    n = SiteNavTree.filterNodes(function (node) {
        return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
        }, leavesOnly);

    $("button#btnResetSearch").attr("disabled", false);
    $("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();

// handle the reset and check for empty filter field... 
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
    if ($("input[name=FT_FilterINPUT]").val() != "")
        $("input[name=FT_FilterINPUT]").val("");
    $("span#SiteNavMatches").text("");
    SiteNavTree.clearFilter();
}).attr("disabled", true);

Sollte in der Lage sein, dies für die meisten Anwendungen anzupassen.

— Richard Dufour
quelle
-2

Wenn Sie auf die TextField-Schaltfläche (X) klicken, wird onmousemove () ausgelöst. Mit diesem Ereignis können Sie eine beliebige Funktion aufrufen.

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
— Priyaranjan Sahoo
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.