wake-up-neo.com

Wie erkennen Sie das Löschen einer HTML5-Eingabe "Suche"?

In HTML5 wird der Eingabetyp search mit einem kleinen X auf der rechten Seite angezeigt, durch den das Textfeld gelöscht wird (zumindest in Chrome, möglicherweise auch anderen). Gibt es eine Möglichkeit zu erkennen, wann dieses X in Javascript oder jQuery angeklickt wird, mit anderen Worten, als zu erkennen, wann das Kästchen überhaupt angeklickt wird, oder indem Sie eine bestimmte Art von Klickerkennung (x-Position/y-Position) ausführen?

javascriptjqueryeventsjavascript-eventshtml5
115
Jason

Tatsächlich gibt es ein "Suche" -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 Attribut "inkrementell" versteht.

Ich bin mir jedoch nicht sicher, ob Sie den Unterschied zwischen dem Klicken auf "x" und dem Suchen erkennen können, es sei denn, Sie verwenden einen "Onclick" - Hack. So oder so, hoffentlich hilft das.

Verweise:

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

84
Pauan

Bind search- event 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)
});
41
Sharad Biradar

Ich möchte eine "späte" Antwort hinzufügen, weil ich heute mit change, keyup und search zu kämpfen habe, und vielleicht kann das, was ich am Ende gefunden habe, auch für andere nützlich sein , und ich wollte nur richtig auf das Drücken des kleinen X (unter Chrome und Opera, FF implementiert es nicht) reagieren und als Ergebnis einen Inhaltsbereich löschen.

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

Es stellt sich heraus, dass Chrome und Firefox unterschiedlich reagieren. Insbesondere behandelt Firefox change als "jede Änderung an der Eingabe", während Chrome dies als "Wenn der Fokus verloren geht UND der Inhalt geändert wird" ..__ behandelt. Daher wurde in Chrome die Funktion "Aktualisierungsfenster" aufgerufen einmal, einmal FF für jeden Tastendruck (einer in keyup, einer in change)

Das Löschen des Felds mit dem kleinen X (das unter FF nicht vorhanden ist) löste außerdem das Ereignis search unter Chrome aus: no keyup, no change.

Die Schlussfolgerung? Verwenden Sie stattdessen input:

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

Es funktioniert unter allen getesteten Browsern mit demselben Verhalten und reagiert auf jede Änderung des Eingabeinhalts (Kopieren und Einfügen mit der Maus, Autovervollständigung und "X").

34
Lorenzo Dematté

Mit Pauans Antwort ist es meist 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>
14
ggutenberg

Es machte für mich Sinn, dass das Klicken auf das X als Änderungsereignis gelten sollte. Ich hatte bereits das onChange-Event eingerichtet, um das zu tun, was ich brauchte. Für mich bestand die Lösung darin, einfach diese jQuery-Zeile auszuführen:

$('#search').click(function(){ $(this).change(); });

5
Cory Gagliardi

Es scheint nicht, dass Sie im Browser darauf zugreifen können. Die Sucheingabe ist ein Webkit-HTML-Wrapper für das Cocoa NSSearchField. Die Schaltfläche "Abbrechen" scheint im Browser-Clientcode enthalten zu sein, ohne dass eine externe Referenz vom Wrapper verfügbar ist.

Quellen:

Sieht so aus, als müssten Sie es durch Mausposition beim Klicken 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
  }
});
4
mVChr

Ich weiß, dass dies eine alte Frage ist, aber ich habe nach ähnlichem gesucht. Bestimmen Sie, wann das 'X' angeklickt wurde, um das Suchfeld zu löschen. Keine der Antworten hier hat mir geholfen. Einer war in der Nähe, aber auch betroffen, wenn der Benutzer die Eingabetaste drückte, er würde dasselbe Ergebnis auslösen wie das Klicken auf das X.

Ich habe diese Antwort in einem anderen Beitrag gefunden und 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);
});
3
lostInTheTetons

Hier ist eine Möglichkeit, dies zu erreichen. Sie müssen inkrementelle Attribute zu Ihrer HTML-Datei 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>

1
Revanth

Fand diesen Beitrag und mir ist klar, dass er ein bisschen alt ist, aber ich denke Ich könnte eine Antwort haben. Dies behandelt das Klicken auf das Kreuz, das Zurücksetzen und das Drücken der ESC-Taste. Ich bin sicher, es könnte wahrscheinlich besser geschrieben werden - ich bin noch relativ neu in Javascript. Folgendes habe ich letztendlich 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 = "";
    }
  });
});
1
ScottG

Full Solution ist da

Dadurch wird die Suche gelöscht, wenn auf die 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 key-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.

0
Tarandeep Singh

Die Suche oder der OnKlick funktioniert ... aber das Problem, das ich gefunden habe, war bei älteren Browsern - die Suche schlägt fehl. Viele Plugins (Jquery Ui Autocomplete oder FancyTree-Filter) haben Unschärfen und Fokus-Handler. Das Hinzufügen zu einem Autocomplete-Eingabefeld funktionierte für mich (verwendet this.value == "", da es schneller auszuwerten war). Die Unschärfe hält dann den Cursor in der Box, wenn Sie auf das kleine "x" klicken. 

Die 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 Reset-Schaltfläche verwenden und das Click-Ereignis 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 dies für die meisten Anwendungen anpassen können.

0
Richard Dufour

basierend auf der Ereignisschleife von js wird die Schaltfläche click on clear search -Ereignis auf input auslösen, 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!')
  }
}

Der obige Code onclick -Ereignis hat eine this._cleared = false-Ereignisschleife gebucht, das Ereignis wird jedoch immer nach das onsearch -Ereignis ausgeführt, sodass Sie den this._cleared-Status stabil überprüfen können, um zu bestimmen, ob der Benutzer gerade geklickt hat X und löste dann ein onsearch-Ereignis aus.

Dies kann für fast alle {alle Bedingungen, eingefügten Text, incremental -Attribut, ENTER/ESC -Tastendruck usw. funktionieren.

0
James Yang

Ich glaube, dass dies die einzige Antwort ist, die NUR ausgelöst wird, wenn das x angeklickt wird.

Es ist jedoch ein bisschen hackig und die Antwort von ggutenberg 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);
});

Dabei ist '#search-field' der jQuery-Selektor für Ihre Eingabe. Verwenden Sie 'input[type=search]', um alle Sucheingaben auszuwählen. Funktioniert durch Suchen nach einem Suchereignis (Antwort von Pauan) unmittelbar nach einem Klick auf das Feld.

0
dlsso

versuchen Sie dies, ich hoffe Ihnen helfen

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