Jak wykryjesz czyszczenie danych wejściowych HTML5 „wyszukiwania”?

154

W HTML5 searchtyp wejścia pojawia się z małym X po prawej stronie, co wyczyści pole tekstowe (przynajmniej w Chrome, może inne). Czy istnieje sposób wykrycia kliknięcia tego X w JavaScript lub jQuery inny niż, powiedzmy, wykrywanie kliknięcia pola w ogóle lub wykrywanie kliknięć w lokalizacji (pozycja x / pozycja y)?

javascript jquery html events dom-events Jason
źródło

Nie wiem zbyt wiele o HTML 5, ale czy nie ma w nim onchangezdarzenia?

Pekka

1

Cóż, możesz dowiedzieć się, czy pole wyszukiwania jest wyczyszczone w ten sposób, ale nie czy nastąpiło to z powodu kliknięcia tego przycisku, czy też wyboru i usunięcia

mVChr

możliwy duplikat Czy są dostępne jakieś zdarzenia dla opcji resetowania wyszukiwania danych wejściowych?

Naftali aka Neal

Możliwa odpowiedź stackoverflow.com/a/59389615/11973798 sprawdź, czy to pomaga

Shubham Khare,

powinieneś dodać keyup i wyszukiwać wydarzenia ..

Burak Öztürk,

104

W rzeczywistości istnieje zdarzenie „wyszukiwania”, które jest wywoływane za każdym razem, gdy użytkownik przeprowadza wyszukiwanie lub gdy klika znak „x”. Jest to szczególnie przydatne, ponieważ rozumie atrybut „przyrostowy”.

Powiedziawszy to, nie jestem pewien, czy potrafisz odróżnić kliknięcie „x” od wyszukiwania, chyba że użyjesz metody „onclick”. Tak czy inaczej, mam nadzieję, że to pomoże.

Bibliografia:

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

Pauan
źródło

2

Dzięki, nie możesz dowiedzieć się, kiedy searchwydarzy się coś innego niż kliknięcie „x”. Nie wydaje się, aby strzelać keyup, blurlub gdy tworzą to w jest złożony. Ale to zasługuje na zaznaczenie jako odpowiedź.

Maksim Vi.

4

searchWydarzenie powinno ognia, gdy użytkownik naciśnie Enter. A jeśli pole wyszukiwania ma incrementalatrybut, uruchomi się również, gdy użytkownik przestanie pisać na sekundę.

Pauan

6

FYI: w chwili pisania tego komentarza działa to tylko w przeglądarce Chrome.

Jason

4

IE11 wyzwala inputzdarzenie, ale nie searchzdarzenie.

Joseph Lennox,

1

Zdarzenie „wyszukiwanie” jest niestandardowe. Zobacz to . Nie polecam go używać bez wypełnienia poly-fill.

rstackhouse

59

Bind search-event the search box as this poniżej-

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

Sharad Biradar
źródło

1

To jest poprawna odpowiedź dla tych, którzy nie są pewni

Erik Grosskurth

6

dobrze wiedzieć, że istnieje wydarzenie wyszukiwania obsługiwane w Chrome, ale nie jest obsługiwane w IE lub FF i według MDN jest to niestandardowa funkcja i nie na ścieżce standardów. developer.mozilla.org/en-US/docs/Web/Events/search

Rich Finelli

50

Chcę dodać „późny” odpowiedź, bo z trudem change, keyupi searchdzisiaj, a może co znalazłem w końcu mogą być użyteczne dla innych też. Zasadniczo mam panel wyszukiwania jako typ i chciałem tylko odpowiednio zareagować na nacisk małego X (pod Chrome i Opera, FF go nie implementuje) i wyczyścić okienko treści.

Miałem taki 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 iw jakich okolicznościach każdy został wezwany).

Okazuje się, że Chrome i Firefox reagują inaczej. W szczególności Firefox traktuje change„każdą zmianę danych wejściowych”, podczas gdy Chrome traktuje to jako „utratę fokusu ORAZ zmianę zawartości”. Tak więc w przeglądarce Chrome funkcja „panelu aktualizacji” była wywoływana raz, na FF dwa razy po każdym naciśnięciu klawisza (jeden na keyup, jeden na change)

Dodatkowo wyczyszczenie pola małym X (którego nie ma pod FF) uruchomiło searchzdarzenie pod Chrome: no keyup, no change.

Konkluzja? Użyj inputzamiast tego:

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

Działa z tym samym zachowaniem we wszystkich testowanych przeglądarkach, reagując na każdą zmianę treści wejściowej (kopiuj-wklej za pomocą myszy, autouzupełnianie i „X”).

Lorenzo Dematté
źródło

1

Dziękuję Lorenzo ... to było bardzo pomocne.

Sterling Bourne

2

Niesamowite, po prostu niesamowite. Wielkie podziękowania zaoszczędziły mi czasu na próbach rozwiązania tego problemu.

user2029541

Wygląda na to, że Firefox zmienił swoje zachowanie od tego czasu? Testowałem z przeglądarką Firefox 42.0 i traktuje changezdarzenie tak samo jak Chrome, uruchamiając się tylko po naciśnięciu Enter lub utracie fokusa.

Suzana

Podoba mi się opcja on input ... fajnie!

Cam Tullos

14

Korzystając z odpowiedzi Pauana, jest to w większości możliwe. Dawny.

<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
źródło

5

Dla mnie changezdarzenie nie jest uruchamiane, dopóki w blurzasadzie. Samo kliknięcie w (x)polu wyszukiwania przeglądarki Chrome nie wywołuje żadnego zdarzenia. Po dalszych badaniach (i przeczytaniu poniższych komentarzy) zabrałem się clickdo pracy. Więc $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });działa po mojej stronie

Jannis

2

Ale $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });uruchamia się również, gdy użytkownik kliknie pole wejściowe.

Scott

8

Wiem, że to stare pytanie, ale szukałem podobnej rzeczy. Określ, kiedy kliknięto „X”, aby wyczyścić pole wyszukiwania. Żadna z odpowiedzi tutaj nie pomogła mi w ogóle. Jeden był blisko, ale również dotknięty, gdy użytkownik nacisnął przycisk „Enter”, wywołałby ten sam skutek, co kliknięcie „X”.

Znalazłem tę odpowiedź w innym poście i działa idealnie dla mnie i uruchamia się 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);
});

lostInTheTetons
źródło

5

Wydawało mi się sensowne, że kliknięcie X powinno liczyć się jako zmiana. Miałem już całe zdarzenie onChange, aby zrobić to, czego potrzebowałem. Więc dla mnie rozwiązaniem było po prostu wykonanie tej linii jQuery:

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

Cory Gagliardi
źródło

Jeśli chcesz, aby to się uruchamiało po naciśnięciu przycisku wyczyść, możesz również dodać sprawdzenie wartości wejścia, komentarz ala Jannisa poniżej: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

Sam

4

Wygląda na to, że nie masz dostępu do tego w przeglądarce. Dane wejściowe wyszukiwania to opakowanie HTML Webkit dla Cocoa NSSearchField. Wydaje się, że przycisk anulowania jest zawarty w kodzie klienta przeglądarki bez żadnego zewnętrznego odniesienia z opakowania.

Źródła:

Wygląda na to, że będziesz musiał to rozgryźć poprzez pozycję myszy po kliknięciu za pomocą czegoś takiego:

$('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
źródło

cóż, to jest do bani. może pójdę z planem B, który był uruchamiany jako zdarzenie na Kliknij, jeśli wejście jest teraz puste ... może włączyłem go na czas 25 ms

Jason

@Jason tak, i możesz użyć kodu, który umieściłem powyżej, aby go uruchomić tylko wtedy, gdy kliknięcie nastąpiło w obszarze, w którym znajduje się X. To oprócz sprawdzenia, czy wejście jest puste, jak powiedziałeś, powinno wystarczyć

mVChr

1

Znalazłem ten post i zdaję sobie sprawę, że jest trochę stary, ale myślę, że mogę mieć odpowiedź. Obsługuje kliknięcie krzyża, cofanie się i naciskanie klawisza ESC. Jestem pewien, że prawdopodobnie można by to lepiej napisać - wciąż jestem stosunkowo nowy w javascript. Oto, co ostatecznie 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 = "";
    }
  });
});

ScottG
źródło

Wygląda na to, że filterVal nie jest zdefiniowana

dlsso

1

spróbuj tego, mam nadzieję, że ci pomogę

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

Don Zanurano
źródło

1

Uważam, że jest to jedyna odpowiedź, która uruchamia się TYLKO po kliknięciu x.

Jest to jednak trochę hakerskie i odpowiedź Ggutenberga 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 selektor jQuery dla twojego wejścia. Użyj, 'input[type=search]'aby wybrać wszystkie wejścia wyszukiwania. Działa, sprawdzając zdarzenie wyszukiwania (odpowiedź Pauana) natychmiast po kliknięciu pola.

dlsso
źródło

1

Pełne rozwiązanie jest tutaj

Spowoduje to wyczyszczenie wyszukiwania po kliknięciu przycisku wyszukiwania x. lub wywoła hit API wyszukiwania, gdy użytkownik naciśnie Enter. ten kod można dodatkowo rozszerzyć o dodatkowy element dopasowujący zdarzenie 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();  
    }
  }
});

Twoje zdrowie.

Tarandeep Singh
źródło

1

w oparciu o pętlę zdarzeń js, clickprzycisk wyczyszczenia wywoła searchzdarzenie na wejściu , 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 wydarzenie zarezerwowane this._cleared = falsepętlę zdarzeń, lecz zdarzenie będzie zawsze uruchamiane po tym onsearchwydarzeniu, dzięki czemu można stabilnie sprawdzić this._clearedstan ustalić, czy użytkownik po prostu kliknie Xprzycisk, a następnie wywołał onsearchzdarzenie.

Może to działać na prawie wszystkich warunkach , wklejony tekst , ma atrybut przyrostowy , naciśnięcie klawisza ENTER / ESC itp.

James Yang
źródło

1

Oto jeden ze sposobów osiągnięcia tego. Musisz dodać atrybut przyrostowy do swojego html, inaczej nie zadział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>

Rozwiń fragment

Revanth
źródło

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
źródło

0

Wyszukiwanie lub onclick działa ... ale problem, który znalazłem, dotyczy starszych przeglądarek - wyszukiwanie kończy się niepowodzeniem. Wiele wtyczek (autouzupełnianie jquery ui lub filtr fantazyjny) ma moduły obsługi rozmycia i ostrości. Dodanie tego do pola wprowadzania autouzupełniania zadziałało dla mnie (użyłem this.value == "", ponieważ było to szybsze do oceny). Rozmycie, a następnie ostrość, utrzymywało kursor w ramce po naciśnięciu małego „x”.

PropertyChange i dane wejściowe działały zarówno dla IE 10, jak i IE 8, a także dla innych przeglądarek:

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

W przypadku rozszerzenia filtra FancyTree możesz użyć przycisku resetowania i wymusić kliknięcie 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);

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

Richard Dufour
źródło

-2

Po kliknięciu przycisku krzyżowego TextField (X) onmousemove () zostaje uruchomiony, możemy użyć tego zdarzenia do wywołania dowolnej funkcji.

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

priyaranjan sahoo
źródło

Jak wykryjesz czyszczenie danych wejściowych HTML5 „wyszukiwania”?

Odpowiedzi:

Uważam, że jest to jedyna odpowiedź, która uruchamia się TYLKO po kliknięciu x.