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


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?

enter image description here


74
2018-01-24 09:55


origen


Respuestas:


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

65
2018-01-24 10:20



los oninput el evento se dispara con this.value establecer a 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.


36
2018-04-21 04:54



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

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

23
2018-06-10 15:57



Por qué no

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

9
2018-01-29 19:09



Me doy cuenta de que esta pregunta ha sido respondida, pero la respuesta aceptada no funcionó en nuestra situación. IE10 no reconoció / disparó el $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 hizo esto difícil también ... aunque habíamos codificado <input type="search"...>, IE los representa como type="text". Es por eso que el selector jQuery hace referencia a type="text".

¡Aclamaciones!


7
2018-04-09 17:01



Solo podemos escuchar el input evento. Por favor mira la referencia para 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
        });
    }
});

5
2018-01-09 04:35



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 de MSDN onchange - probado en IE10.

... o para esconderse con CSS:

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

1
2018-01-15 18:47



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

0
2017-07-15 12:58