javascript - eventos - delete event listener js

Evento disparado al borrar el ingreso de texto en IE10 con el icono de borrar

Question

En Chrome, el evento de "búsqueda" se activa en las entradas de búsqueda cuando el usuario hace clic en el botón Borrar.

¿Hay alguna manera de capturar el mismo evento en javascript en Internet Explorer 10?

Answer 1

El código anterior no funcionaba en mi caso y he cambiado una línea e introducido $input.typeahead(''val'', ''''); que funciona en mi caso ...

// There are 2 events fired on input element when clicking on the clear button:// mousedown and mouseup.
$("input").on(''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 === ''''){
            $input.typeahead(''val'', '''');
            e.preventDefault();
        }
    }, 1);
});

Answer 2

El evento this.value se this.value con this.value establecido en una cadena vacía. Esto me solucionó el problema, ya que quiero ejecutar la misma acción si borran el cuadro de búsqueda con la X o retroceden. Esto funciona solo en IE 10.

Answer 3

La única solución que finalmente encontré:

// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("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 == ""){
      // Gotcha
      $input.trigger("cleared");
    }
  }, 1);
});

Answer 4

Me doy cuenta de que esta pregunta ha sido respondida, pero la respuesta aceptada no funcionó en nuestra situación. IE10 no reconoció / disparó $input.trigger("cleared"); declaración.

Nuestra solución final reemplazó esa declaración con un evento de selección en la tecla ENTER (código 13). Para la posteridad, esto es lo que funcionó en nuestro caso:

$(''input[type="text"]'').bind("mouseup", function(event) {
    var $input = $(this);
    var oldValue = $input.val();
    if (oldValue == "") {
        return;
    }
    setTimeout(function() {
        var newValue = $input.val();
        if (newValue == "") {
            var enterEvent = $.Event("keydown");
            enterEvent.which = 13;
            $input.trigger(enterEvent);
        }
    }, 1);
});

Además, queríamos aplicar este enlace solo a las entradas de "búsqueda", no a todas las entradas en la página. Naturalmente, IE también lo hizo difícil ... aunque codificamos <input type="search"...> , IE los representaba como type="text" . Es por eso que el selector jQuery hace referencia al type="text" .

¡Aclamaciones!

Answer 5

Por qué no

$("input").bind(''input propertychange'', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});

Answer 6

Solo podemos escuchar el evento de input . Por favor vea la referencia para más detalles. Así es como resolví un problema con el botón Borrar en Sencha ExtJS en IE:

Ext.define(''Override.Ext.form.field.ComboBox'', {
    override: ''Ext.form.field.ComboBox'',

    onRender: function () {
        this.callParent();

        var me = this;
        this.inputEl.dom.addEventListener(''input'', function () {
            // do things here
        });
    }
});

Answer 7

Use input lugar. Funciona con el mismo comportamiento en todos los navegadores.

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

Answer 8

para mi control de servidor asp.net

<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>

js

function jsfun_tbSearchName_onchange() {
    if (objTbNameSearch.value.trim() == '''')
            objBTSubmitSearch.setAttribute(''disabled'', true);
        else
            objBTSubmitSearch.removeAttribute(''disabled'');
        return false;
}

árbitro

Evento onchange de MSDN : probado en IE10.

... o para esconderse con CSS:

input[type=text]::-ms-clear { display: none; }