¿Cómo se detecta la eliminación de una entrada HTML5 de "búsqueda"?

154

En HTML5, el searchtipo de entrada aparece con una pequeña X a la derecha que borrará el cuadro de texto (al menos en Chrome, tal vez otros). ¿Hay alguna forma de detectar cuándo se hace clic en esta X en Javascript o jQuery que no sea, por ejemplo, detectar cuándo se hace clic en el cuadro o hacer algún tipo de ubicación para detectar clics (posición x / posición y)?

javascript jquery html events dom-events Jason
fuente

No sé mucho sobre HTML 5, pero ¿no tiene un onchangeevento?

Pekka

1

Bueno, se podría averiguar si el cuadro de búsqueda se borra de esa manera, pero no si ha ocurrido debido al hacer clic en ese botón de selección y eliminación vs

mVChr

posible duplicado de ¿Hay algún evento disponible para la opción de reinicio para la búsqueda de entrada?

Naftali aka Neal

Posible respuesta stackoverflow.com/a/59389615/11973798 compruebe si ayuda

Shubham Khare

debe agregar keyup y buscar eventos ..

Burak Öztürk

104

En realidad, hay un evento de "búsqueda" que se activa cada vez que el usuario busca, o cuando el usuario hace clic en la "x". Esto es especialmente útil porque comprende el atributo "incremental".

Ahora, habiendo dicho eso, no estoy seguro si puedes notar la diferencia entre hacer clic en la "x" y buscar, a menos que uses un truco "onclick". De cualquier manera, espero que esto ayude.

Referencias

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

Pauan
fuente

2

Gracias, no puedo entender cuándo searchocurre un evento que no sea cuando haces clic en la 'x'. Parece que no se enciende keyup, bluro cuando se envía el formulario en el que se encuentra. Pero esto merece ser marcado como una respuesta.

Maksim Vi.

44

El searchevento debe activarse cuando el usuario presiona Enter. Y si el cuadro de búsqueda tiene el incrementalatributo, también se activará cuando el usuario deje de escribir por un segundo.

Pauan

66

FYI: al momento de escribir este comentario, esto solo funciona en Chrome.

Jason

44

IE11 activa el inputevento pero no el searchevento.

Joseph Lennox

1

El evento "buscar" no es estándar. Mira esto . No recomendaría su uso sin un relleno de polietileno.

rstackhouse

59

Enlace search-event el cuadro de búsqueda como se indica a continuación-

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

Sharad Biradar
fuente

1

Esta es la respuesta correcta para aquellos que no están seguros

Erik Grosskurth

66

Es bueno saber que hay un evento de búsqueda compatible con Chrome, pero no compatible con IE o FF y, según MDN, es una característica no estándar y no está en la pista de estándares. developer.mozilla.org/en-US/docs/Web/Events/search

Rich Finelli

50

Quiero añadir una respuesta "tarde", porque luché con change, keyupy searchhoy, y tal vez lo que he encontrado al final puede ser útil para otros también. Básicamente, tengo un panel de búsqueda como tipo, y solo quería reaccionar adecuadamente a la presión de la pequeña X (en Chrome y Opera, FF no lo implementa), y borrar un panel de contenido como resultado.

Tenía este código:

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

(Están separados porque quería comprobar cuándo y en qué circunstancias se llamó a cada uno).

Resulta que Chrome y Firefox reaccionan de manera diferente. En particular, Firefox lo trata changecomo "cada cambio en la entrada", mientras que Chrome lo trata como "cuando se pierde el foco Y se cambia el contenido". Entonces, en Chrome, la función "panel de actualización" se llamó una vez, en FF dos veces por cada pulsación de tecla (una en keyup, una en change)

Además, al borrar el campo con la pequeña X (que no está presente en FF) se activó el searchevento en Chrome: no keyup, no change.

¿La conclusión? Use en su inputlugar:

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

Funciona con el mismo comportamiento en todos los navegadores que probé, reaccionando a cada cambio en el contenido de entrada (copiar y pegar con el mouse, autocompletar y "X" incluidos).

Lorenzo Dematté
fuente

1

Gracias Lorenzo ... esto fue muy útil.

Sterling Bourne

2

Impresionante, simplemente increíble. Muchas gracias me ahorraron tiempo tratando de resolver esto.

user2029541

Parece que Firefox cambió su comportamiento desde entonces? Probé con Firefox 42.0 y trata el changeevento como Chrome, disparando solo en Enter o foco perdido.

Suzana

Me gusta la opción de entrada ... ¡bien!

Cam Tullos

14

Usando la respuesta de Pauan, es principalmente posible. 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
fuente

55

Para mí, el changeevento no se dispara hasta que blurbásicamente. Simplemente hacer clic en el (x)interior del campo de búsqueda de Chrome no parece activar ningún evento para mí. Después de una investigación más profunda (y de leer los comentarios a continuación) me puse clicka trabajar para mí. Así $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });funciona de mi parte

Jannis

2

Pero $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });también se activaría cuando el usuario haga clic en el campo de entrada.

Scott

8

Sé que esta es una vieja pregunta, pero estaba buscando algo similar. Determine cuándo se hizo clic en la 'X' para borrar el cuadro de búsqueda. Ninguna de las respuestas aquí me ayudó en absoluto. Uno estaba cerca, pero también se vio afectado cuando el usuario presionó el botón 'enter', dispararía el mismo resultado que hacer clic en la 'X'.

Encontré esta respuesta en otra publicación y funciona perfecto para mí y solo se activa cuando el usuario borra el cuadro de búsqueda.

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

5

Tenía sentido para mí que hacer clic en la X debería contar como un evento de cambio. Ya tenía el evento onChange configurado para hacer lo que necesitaba que hiciera. Entonces, para mí, la solución fue simplemente hacer esta línea jQuery:

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

Cory Gagliardi
fuente

Si desea que esto se active cuando se presiona el botón Borrar, también puede agregar una verificación para el valor de la entrada, comentario de ala Jannis a continuación: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

Sam

4

No parece que puedas acceder a esto en el navegador. La entrada de búsqueda es un contenedor HTML de Webkit para Cocoa NSSearchField. El botón cancelar parece estar contenido en el código del cliente del navegador sin ninguna referencia externa disponible del reiniciador.

Fuentes:

Parece que tendrá que resolverlo mediante la posición del mouse al hacer clic con algo como:

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

bueno, eso apesta. tal vez iré con el plan B, que fue ejecutar un evento en Haga clic si la entrada ahora está vacía ... tal vez ponerlo en un temporizador de 25 ms

Jason

@ Jason, sí, y puedes usar el código que puse arriba para ejecutarlo solo si el clic ocurrió en el área donde está la X. Eso, además de verificar si la entrada está vacía, como dijiste, debería ser suficiente

mVChr

1

Encontré esta publicación y me doy cuenta de que es un poco vieja, pero creo que podría tener una respuesta. Esto maneja el clic en la cruz, retrocediendo y presionando la tecla ESC. Estoy seguro de que probablemente podría escribirse mejor, todavía soy relativamente nuevo en JavaScript. Esto es lo que terminé haciendo: estoy 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
fuente

Parece que filterVal no está definido

dlsso

1

prueba esto, espero ayudarte

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

Don zanurano
fuente

1

Creo que esta es la única respuesta que se activa SOLO cuando se hace clic en la x.

Sin embargo, es un poco hacky y la respuesta de ggutenberg funcionará para la mayoría de las personas.

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

¿Dónde '#search-field'está el selector jQuery para su entrada? Use 'input[type=search]'para seleccionar todas las entradas de búsqueda. Funciona al buscar un evento de búsqueda (la respuesta de Pauan) inmediatamente después de hacer clic en el campo.

dlsso
fuente

1

La solución completa está aquí

Esto borrará la búsqueda cuando se haga clic en la búsqueda x. o llamará a la búsqueda api hit cuando el usuario presione enter este código puede ampliarse aún más con el igualador de eventos de keyup adicional esc. Pero esto debería hacerlo todo.

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

Salud.

Tarandeep Singh
fuente

1

basado en el bucle de eventos de js, el clickbotón de activación activará el searchevento en la entrada , por lo que el código siguiente funcionará como se esperaba:

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

El código anterior, evento onclick , reservó un this._cleared = falsebucle de evento, pero el evento siempre se ejecutará después del onsearchevento, por lo que puede verificar de manera estable el this._clearedestado para determinar si el usuario simplemente hizo clic en el Xbotón y luego activó un onsearchevento.

Esto puede funcionar en casi todas las condiciones , el texto pegado , tiene un atributo incremental , presionar la tecla ENTER / ESC , etc.

James Yang
fuente

1

Aquí hay una forma de lograr esto. Debe agregar un atributo incremental a su html o no funcionará.

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>

Expandir fragmento

Revanth
fuente

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
fuente

0

La búsqueda u onclick funciona ... pero el problema que encontré fue con los navegadores más antiguos: la búsqueda falla. Muchos complementos (jquery ui autocomplete o fancytree filter) tienen controladores de desenfoque y enfoque. Agregar esto a un cuadro de entrada de autocompletar funcionó para mí (usé this.value == "" porque fue más rápido de evaluar). El desenfoque y luego el foco mantienen el cursor en el cuadro cuando presionas la pequeña 'x'.

PropertyChange y la entrada funcionaron tanto para IE 10 como para IE 8, así como para otros navegadores:

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

Para la extensión de filtro FancyTree, puede usar un botón de reinicio y forzar su evento de clic de la siguiente manera:

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

Debería poder adaptar esto para la mayoría de los usos.

Richard Dufour
fuente

-2

Al hacer clic en el botón cruzado TextField (X) onmousemove () se dispara, podemos usar este evento para llamar a cualquier función.

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

priyaranjan sahoo
fuente

¿Cómo se detecta la eliminación de una entrada HTML5 de "búsqueda"?

Respuestas:

Creo que esta es la única respuesta que se activa SOLO cuando se hace clic en la x.