Evento acionado ao limpar a input de texto no IE10 com um ícone claro

No chrome, o evento “search” é acionado nas inputs de pesquisa quando o usuário clica no botão limpar.

Existe uma maneira de capturar o mesmo evento em javascript no Internet Explorer 10?

insira a descrição da imagem aqui

A única solução que finalmente encontrei:

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

O evento oninput acionado com this.value definido como uma cadeia vazia. Isso resolveu o problema para mim, já que eu quero executar a mesma ação se eles limpam a checkbox de pesquisa com o X ou pelo backspacing. Isso funciona apenas no IE 10.

Use a input vez disso. Funciona com o mesmo comportamento em todos os navegadores.

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

Por que não

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

Eu percebo que esta pergunta foi respondida, mas a resposta aceita não funcionou em nossa situação. O IE10 não reconheceu / disparou o $input.trigger("cleared"); declaração.

Nossa solução final substituiu essa declaração por um evento keydown na chave ENTER (código 13). Para a posteridade, foi isso que funcionou no nosso 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); }); 

Além disso, queríamos aplicar essa vinculação apenas às inputs de “pesquisa”, não a todas as inputs da página. Naturalmente, o IE também dificultou isso … embora tenhamos codificado , o IE os processou como type="text" . É por isso que o seletor do jQuery faz referência ao type="text" .

Felicidades!

Podemos apenas ouvir o evento de input . Por favor, consulte a referência para detalhes. Foi assim que consertei um problema com o botão clear no Sencha ExtJS no 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 }); } }); 

para o meu controle do servidor asp.net

  

js

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

ref

Evento MSDN onchange – testado no IE10.

… ou para se esconder com CSS:

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

O código acima não estava funcionando no meu caso e eu mudei uma linha e introduzi $input.typeahead('val', ''); que funciona no meu 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); });