The event fires when you clear text input in IE10 with a clear icon

Question

In chrome, a “search” event is fired at the search inputs when the user presses the clear button.

Is there a way to capture the same event in javascript in Internet Explorer 10?

Answer 1

The only solution I found:

// 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 2

The oninput event fires with this.value set to an empty string. This solved the problem for me, because I want to do the same thing: do they clear the search box using X or by way of the return path. This only works in IE 10.

Answer 3

Use input instead. It works with the same behavior in all browsers.

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

Answer 4

Why not

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

Answer 5

I understand that this question was answered, but the accepted answer did not work in our situation. IE10 did not recognize / the $input.trigger("cleared"); statement did not work $input.trigger("cleared"); .

Our final solution replaced this statement with the keydown event on the ENTER key (code 13). For posterity, this is what worked in our case:

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

In addition, we wanted to apply this binding only to the "search" inputs, and not to all the inputs on the page. Naturally, IE also made it harder ... although we encoded <input type="search"...> , IE displayed them as type="text" . Therefore, the jQuery selector refers to type="text" .

Hurrah!

Answer 6

We can just listen to the input event. See the link for more details. Here is how I fixed the problem with the Clear button in Sencha ExtJS on 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

for my asp.net server management

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

ref

MSDN Exchange Event - Tested in IE10.

... or hide using CSS:

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

Answer 8

The above code did not work in my case, and I changed one line and introduced $input.typeahead('val', ''); which works in my case ..

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