Evento activado al borrar la entrada de texto en IE10 con el icono claro

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 forma de capturar el mismo evento en javascript en Internet Explorer 10?

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

El oninputevento se dispara con un this.valueconjunto de caracteres vacío. Esto me resolvió el problema, ya que quiero ejecutar la misma acción ya sea que borren el cuadro de búsqueda con la X o retrocediendo. Esto solo funciona en IE 10.

Úselo en su inputlugar. Funciona con el mismo comportamiento en todos los navegadores.

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

Por qué no

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

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

Nuestra solución final reemplazó esa declaración con un evento keydown 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 de la página. Naturalmente, IE también hizo esto difícil ... aunque habíamos codificado <input type="search"...>, IE los renderizó como type="text". Es por eso que el selector de jQuery hace referencia a type="text".

¡Salud!

Podemos simplemente escuchar el inputevento. Consulte la referencia para obtener más detalles. Así es como solucioné 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
        });
    }
});

Una solución lista para usar es simplemente deshacerse de la X por completo con CSS:

::-ms-clear { display: none; } /* see /programming/14007655 */

Esto tiene los siguientes beneficios:

1. Solución mucho más simple: cabe en una línea
2. Se aplica a todas las entradas para que no tenga que tener un controlador para cada entrada
3. No hay riesgo de romper javascript con un error en la lógica (se necesita menos control de calidad)
4. Estandariza el comportamiento en todos los navegadores: hace que IE se comporte igual que Chrome, ya que Chrome no tiene la X

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 esconderse con CSS:

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

El código anterior no funcionaba en mi caso y cambié una línea e introduje $input.typeahead('val', '');cuál 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);
});