Jak wykryć wyczyszczenie" wyszukiwania " wejścia HTML5?

Question

Jak wykryć wyczyszczenie" wyszukiwania " wejścia HTML5?

W HTML5, typ wejścia search pojawia się z małym X po prawej stronie, który wyczyści pole tekstowe(przynajmniej w Chrome, może innych). Czy istnieje sposób, aby wykryć, kiedy ten X jest kliknięty w javascript lub jQuery inny niż, powiedzmy, wykrywanie, kiedy pole jest kliknięte w ogóle lub robi jakiś rodzaj lokalizacji wykrywania kliknięć (x-position/y-position)?

110

javascript jquery javascript-events html5 events

Author: alex, 2010-06-04

Source

15 answers

Bind search - Zdarzenie pola wyszukiwania, jak podano poniżej -

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});

36

Author: Sharad Biradar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-22 19:34:58

Chcę dodać "spóźnioną" odpowiedź, ponieważ zmagałem się z change, keyup i search dzisiaj, i może to, co znalazłem w końcu może być przydatne dla innych. W zasadzie mam panel search-as-type i chciałem tylko odpowiednio zareagować na naciśnięcie małego X (Pod Chrome i Operą, FF go nie implementuje) i wyczyścić okienko zawartości w wyniku.

Miałem ten kod:

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

(są oddzielne, ponieważ chciałem sprawdzić, kiedy i w jakich okolicznościach każdy był called).

Okazuje się, że Chrome i Firefox reagują inaczej. W szczególności Firefox traktuje change jako "każdą zmianę wejścia", podczas gdy Chrome traktuje to jako "gdy fokus jest utracony i zawartość jest zmieniona". Tak więc w Chrome funkcja "update panel" była wywoływana raz, na FF dwa razy dla każdego naciśnięcia klawisza (jeden w keyup, jeden w change)

Dodatkowo wyczyszczenie pola małym X (którego nie ma pod FF) wywołało Zdarzenie search w Chrome: no keyup, no change.

Wniosek? Użyj input zamiast:

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

Działa z takim samym zachowaniem we wszystkich przeglądarkach, które testowałem, reagując przy każdej zmianie zawartości wejściowej (kopiuj-wklej za pomocą myszy, autocompletion i "X" w zestawie).

29

Author: Lorenzo Dematté,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-29 14:00:06

Używając odpowiedzi Pauana, jest to w większości możliwe. 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>

13

Author: ggutenberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-17 18:23:18

Dla mnie miało to sens, że kliknięcie X powinno liczyć się jako zdarzenie zmiany. Miałem już wszystkie ustawienia zdarzenia onChange, aby zrobić to, czego potrzebowałem. Więc dla mnie fixem było po prostu zrobienie tej linii jQuery:

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

5

Author: Cory Gagliardi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-18 17:05:53

Wygląda na to, że nie masz dostępu do tego w przeglądarce. Wejście wyszukiwania jest opakowaniem HTML Webkit dla Cocoa NSSearchField. Przycisk Anuluj wydaje się być zawarty w kodzie klienta przeglądarki bez zewnętrznego odniesienia dostępnego z opakowanie.

Źródła:

Wygląda na to, że będziesz musiał to rozgryźć poprzez pozycję myszy przy klikaniu z czymś takim:

$('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

Author: mVChr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-04 20:55:14

Wiem, że to stare pytanie, ale szukałem czegoś podobnego. Określ, kiedy kliknięto "X", aby wyczyścić pole wyszukiwania. Żadna z odpowiedzi mi nie pomogła. Jeden był blisko, ale również wpływ, gdy użytkownik naciśnął przycisk "enter", to odpaliłby taki sam wynik, jak kliknięcie "X".

Znalazłem tę odpowiedź w innym poście i działa idealnie dla mnie i działa tylko wtedy, gdy użytkownik wyczyści pole wyszukiwania.

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

2

Author: lostInTheTetons,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-10 15:42:45

Znalazłem ten post i zdaję sobie sprawę, że jest trochę stary, ale myślę, że mogę mieć odpowiedź. To obsługuje kliknięcie na krzyżu, Backspace i naciśnięcie klawisza ESC. Jestem pewien, że prawdopodobnie można by to napisać lepiej - nadal jestem stosunkowo nowy w javascript. Oto co zrobiłem-używam 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

Author: ScottG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-19 18:59:52

Jest jeden sposób, aby to osiągnąć. Musisz dodać atrybut Przyrostowy do swojego html lub nie będzie działać.

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

Author: Revanth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-28 14:05:51

Wyszukiwanie lub onclick działa... ale problem znalazłem było ze starszymi przeglądarkami-wyszukiwanie nie powiodło się. Wiele wtyczek (jQuery UI autocomplete lub fancytree filter) ma obsługę rozmycia i ostrości. Dodawanie tego do pola wprowadzania autouzupełniania działało dla mnie(użyłem tego.wartość =="", ponieważ szybciej oceniano). Rozmycie, a następnie ostrość utrzymywała kursor w polu po naciśnięciu małego "x".

Zmiana właściwości i wejście działały zarówno dla IE 10 i IE 8, jak i innych przeglądarki:

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

Dla rozszerzenia filtra FancyTree, możesz użyć przycisku reset i wymusić Zdarzenie kliknięcia w następujący sposób:

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

Powinny być w stanie dostosować to do większości zastosowań.

0

Author: Richard Dufour,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-20 15:54:45

Spróbuj tego, hope help you

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

0

Author: Don Zanurano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-23 03:20:51

Uważam, że jest to jedyna odpowiedź, która odpala się tylko po kliknięciu X.

Jednak jest to trochę hacky i odpowiedź ggutenberg będzie działać dla większości ludzi.

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

Gdzie '#search-field' jest selektorem jQuery dla Twojego wejścia. Użyj 'input[type=search]', aby wybrać wszystkie wejścia wyszukiwania. Działa poprzez sprawdzenie zdarzenia wyszukiwania (odpowiedź Pauana) natychmiast po kliknięciu w pole.

0

Author: dlsso,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-27 20:42:56

Pełne rozwiązanie jest tutaj

Spowoduje wyczyszczenie wyszukiwania po kliknięciu opcji szukaj X. lub wywoła hit API wyszukiwania, Gdy użytkownik naciśnie enter. kod ten może być dodatkowo rozszerzony o dodatkową matrycę zdarzeń esc keyup. ale to powinno wystarczyć.

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

Zdrówko.

0

Author: Tarandeep Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-08 09:51:50

Na podstawie pętli zdarzeń JS, click na przycisku clear wywoła searchZdarzenie na input, więc poniższy kod będzie działał zgodnie z oczekiwaniami:

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

Powyższy kod, onclick Zdarzenie zarezerwowało pętlę zdarzeń this._cleared = false, ale zdarzenie będzie zawsze uruchamiane po zdarzeniu onsearch, więc możesz stabilnie sprawdzić status this._cleared, aby określić, czy użytkownik kliknął przycisk X, a następnie uruchomił Zdarzenie onsearch.

To może działać na prawie w każdych warunkach , wklejony tekst, posiada Przyrostowy atrybut, ENTER/ESC wciśnięcie klawisza itp.

0

Author: James Yang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-24 04:49:05

Po kliknięciu przycisku TextField cross (X) zostanie wywołana metoda onmousemove (), możemy użyć tego zdarzenia do wywołania dowolnej funkcji.

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>

-1

Author: priyaranjan sahoo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-23 12:32:50

score 80 · Accepted Answer

W rzeczywistości istnieje Zdarzenie "Szukaj", które jest wywoływane za każdym razem, gdy użytkownik wyszukuje lub gdy użytkownik kliknie "x". Jest to szczególnie przydatne, ponieważ rozumie atrybut "Przyrostowy".

Teraz, powiedziawszy to, nie jestem pewien, czy możesz odróżnić kliknięcie " x "od Wyszukiwania, chyba że użyjesz "onclick" hack. Tak czy siak, mam nadzieję, że to pomoże.

Bibliografia:

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