Come si rileva la cancellazione di un input HTML5 "ricerca"?

154

In HTML5, il searchtipo di input appare con una piccola X sulla destra che cancellerà la casella di testo (almeno in Chrome, forse altri). C'è un modo per rilevare quando si fa clic su questa X in Javascript o jQuery oltre a, per esempio, rilevare quando si fa clic sulla casella o fare una sorta di rilevamento del clic sulla posizione (posizione x / posizione y)?

— Jason
fonte

Non so molto su HTML 5, ma non ha un onchangeevento?

— Pekka,

1

Bene, potresti capire se la casella di ricerca è deselezionata in questo modo, ma non se si è verificato a causa del clic su quel pulsante vs selezione ed eliminazione

— mVChr

possibile duplicato di Esistono eventi disponibili per l'opzione di ripristino per la ricerca di input?

— Naftali aka Neal,

Possibile risposta stackoverflow.com/a/59389615/11973798 verifica se aiuta

— Shubham Khare,

dovresti aggiungere keyup e cercare eventi ..

— Burak Öztürk

105

In realtà, esiste un evento di "ricerca" che viene generato ogni volta che l'utente effettua una ricerca o quando l'utente fa clic sulla "x". Ciò è particolarmente utile perché comprende l'attributo "incrementale".

Ora, detto questo, non sono sicuro che tu possa dire la differenza tra fare clic sulla "x" e cercare, a meno che tu non usi un hack "onclick". Ad ogni modo, si spera che questo aiuti.

Riferimenti:

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

— Pauan
fonte

2

Grazie, non riesco a capire quando searchsi verifica un evento diverso da quando fai clic sulla "x". Non sembra di sparare sui keyup, bluro quando si tratta di formare in è presentata. Ma questo merita di essere contrassegnato come una risposta.

— Maksim Vi.

4

L' searchevento dovrebbe attivarsi quando l'utente preme Enter. E se la casella di ricerca ha l' incrementalattributo, si attiverà anche quando l'utente smette di digitare per un secondo.

— Pauan,

6

Cordiali saluti: dalla stesura di questo commento, questo funziona solo in Chrome.

— Jason,

4

IE11 attiva l' inputevento ma non l' searchevento.

— Joseph Lennox,

1

L'evento "cerca" non è standard. Vedere questo . Non consiglierei il suo utilizzo senza un polifill.

— rstackhouse,

59

Associa search-event la casella di ricerca come indicato di seguito-

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

— Sharad Biradar
fonte

1

Questa è la risposta corretta per coloro che non sono sicuri

— Erik Grosskurth,

6

buono a sapersi che c'è un evento di ricerca supportato in Chrome, ma non supportato in IE o FF e secondo MDN è una funzionalità non standard e non sulla traccia standard. developer.mozilla.org/en-US/docs/Web/Events/search

— Rich Finelli,

50

Voglio aggiungere una risposta "in ritardo", perché ho lottato con change, keyupe searchoggi, e forse quello che ho trovato alla fine potrebbe essere utile anche per gli altri. Fondamentalmente, ho un pannello di ricerca come tipo e volevo solo reagire correttamente alla stampa della piccola X (sotto Chrome e Opera, FF non lo implementa) e, di conseguenza, deselezionare un riquadro del contenuto.

Ho avuto questo codice:

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

(Sono separati perché volevo verificare quando e in quali circostanze è stato chiamato ciascuno).

Si scopre che Chrome e Firefox reagiscono in modo diverso. In particolare, Firefox considera change"ogni modifica all'input", mentre Chrome lo considera "quando si perde lo stato attivo E il contenuto viene modificato". Quindi, su Chrome la funzione "pannello di aggiornamento" è stata chiamata una volta, su FF due volte per ogni sequenza di tasti (uno in keyup, uno in change)

Inoltre, la cancellazione del campo con la piccola X (che non è presente in FF) ha generato l' searchevento in Chrome: no keyup, no change.

La conclusione? Usa inputinvece:

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

Funziona con lo stesso comportamento in tutti i browser che ho testato, reagendo ad ogni modifica del contenuto di input (copia-incolla con il mouse, completamento automatico e "X" inclusi).

— Lorenzo Dematté
fonte

1

Grazie Lorenzo ... questo è stato molto utile.

— Sterling Bourne,

2

Fantastico, semplicemente fantastico. Molte grazie mi hanno fatto risparmiare tempo cercando di capire questo.

— user2029541

Sembra che Firefox abbia cambiato comportamento da allora? Ho provato con Firefox 42.0 e tratta l' changeevento come Chrome, sparando solo su Enter o focus perso.

— Suzana,

Mi piace l'opzione di input on ... bello!

— Cam Tullos,

14

Usando la risposta di Pauan, è principalmente possibile. 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
fonte

5

Per me, l' changeevento non si accende fino a quando blurfondamentalmente. Fare semplicemente clic (x)all'interno del campo di ricerca di Chrome non sembra generare alcun evento per me. Dopo ulteriori indagini (e leggendo i commenti sotto) ho avuto modo clickdi lavorare per me. Quindi $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });funziona dalla mia parte

— Jannis

2

Ma $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });si innescherebbe anche quando l'utente fa clic nel campo di input.

— Scott,

8

So che questa è una vecchia domanda, ma stavo cercando una cosa simile. Determina quando si fa clic sulla "X" per cancellare la casella di ricerca. Nessuna delle risposte qui mi ha aiutato affatto. Uno era vicino ma anche interessato quando l'utente premeva il pulsante 'invio', avrebbe generato lo stesso risultato del clic sulla 'X'.

Ho trovato questa risposta su un altro post e funziona perfettamente per me e si attiva solo quando l'utente cancella la casella di ricerca.

$("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
fonte

5

Per me aveva senso che fare clic sulla X dovesse essere considerato un evento di modifica. Ho già avuto l'evento onChange tutto impostato per fare ciò di cui avevo bisogno. Quindi per me, la soluzione era semplicemente fare questa linea jQuery:

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

— Cory Gagliardi
fonte

Se vuoi che questo si attivi quando si preme il pulsante Clear, puoi anche aggiungere un controllo per il valore dell'input, il commento di ala Jannis qui sotto: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

— Sam

4

Non sembra che tu possa accedervi nel browser. L'input di ricerca è un wrapper HTML Webkit per Cocoa NSSearchField. Il pulsante Annulla sembra essere contenuto nel codice client del browser senza riferimenti esterni disponibili dal wrapper.

fonti:

Sembra che dovrai capirlo attraverso la posizione del mouse al clic con qualcosa del tipo:

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

bene, fa schifo. forse andrò con il piano B, che è stato eseguito un evento su Fai clic se l'ingresso è ora vuoto ... forse inseriscilo in un timer da 25 ms

— Jason

@Jason sì, e puoi usare il codice che ho messo sopra per eseguirlo solo se il clic si è verificato nell'area in cui si trova la X. Che oltre a verificare se l'ingresso è vuoto come hai detto dovrebbe bastare

— mVChr

1

Ho trovato questo post e mi rendo conto che è un po 'vecchio, ma penso che potrei avere una risposta. Questo gestisce il clic sulla croce, il backspacing e la pressione del tasto ESC. Sono sicuro che probabilmente potrebbe essere scritto meglio - sono ancora relativamente nuovo su JavaScript. Ecco cosa ho finito per fare: sto usando 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
fonte

Sembra che filterVal non sia definito

— dlsso,

1

prova questo, spero di aiutarti

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

— Don Zanurano
fonte

1

Credo che questa sia l'unica risposta che si attiva SOLO quando si fa clic sulla x.

Tuttavia, è un po 'confuso e la risposta di ggutenberg funzionerà per la maggior parte delle persone.

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

Dov'è '#search-field'il selettore jQuery per i tuoi input. Utilizzare 'input[type=search]'per selezionare tutti gli input di ricerca. Funziona controllando un evento di ricerca (la risposta di Pauan) immediatamente dopo un clic sul campo.

— dlsso
fonte

1

La soluzione completa è qui

Ciò cancellerà la ricerca quando si fa clic su Cerca x. o chiamerà l'api di ricerca hit quando l'utente preme invio. questo codice può essere ulteriormente esteso con il matcher di eventi aggiuntivo keyup esc. ma questo dovrebbe fare tutto.

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

Saluti.

— Tarandeep Singh
fonte

1

basato sul loop di eventi di js, il clickpulsante on clear attiverà l' searchevento in input , quindi il codice sottostante funzionerà come previsto:

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

Il codice sopra, l' evento onclick ha prenotato un this._cleared = falseloop di eventi, ma l'evento verrà sempre eseguito dopo l' onsearchevento, quindi è possibile controllare stabilmente lo this._clearedstato per determinare se l'utente ha appena fatto clic sul Xpulsante e quindi attivato un onsearchevento.

Questo può funzionare su quasi tutte le condizioni , il testo incollato , l' attributo incrementale , il tasto INVIO / ESC premuto ecc.

— James Yang
fonte

1

Ecco un modo per raggiungere questo obiettivo. Devi aggiungere un attributo incrementale al tuo html altrimenti non funzionerà.

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>

Espandi frammento

— Revanth
fonte

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
fonte

0

La ricerca o onclick funzionano ... ma il problema che ho riscontrato riguardava i browser meno recenti: la ricerca ha esito negativo. Molti plugin (jquery ui con completamento automatico o filtro fancytree) hanno gestori di sfocatura e messa a fuoco. L'aggiunta di questo a una casella di input di completamento automatico ha funzionato per me (utilizzato this.value == "" perché era più veloce da valutare). La sfocatura, quindi la messa a fuoco, ha mantenuto il cursore nella casella quando si preme la piccola 'x'.

PropertyChange e input hanno funzionato sia per IE 10 che per IE 8, nonché per altri browser:

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

Per l'estensione del filtro FancyTree, è possibile utilizzare un pulsante di ripristino e forzare il relativo evento clic come segue:

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

Dovrebbe essere in grado di adattarlo per la maggior parte degli usi.

— Richard Dufour
fonte

-2

Facendo clic sul pulsante incrociato TextField (X) onmousemove () viene generato, possiamo usare questo evento per chiamare qualsiasi funzione.

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

— priyaranjan sahoo
fonte