Event fired when clearing text input on IE10 with clear icon
JavascriptEventsInternet Explorer-10Html InputJavascript Problem Overview
On chrome, the "search" event is fired on search inputs when user clicks the clear button.
Is there a way to capture the same event in javascript on Internet Explorer 10?
Javascript Solutions
Solution 1 - Javascript
The only solution I finally 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);
});
Solution 2 - Javascript
The oninput
event fires with this.value
set to an empty string. This solved the problem for me, since I want to execute the same action whether they clear the search box with the X or by backspacing. This works in IE 10 only.
Solution 3 - Javascript
Use input
instead. It works with the same behaviour under all the browsers.
$(some-input).on("input", function() {
// update panel
});
Solution 4 - Javascript
Why not
$("input").bind('input propertychange', function() {
if (this.value == ""){
$input.trigger("cleared");
}
});
Solution 5 - Javascript
I realize this question has been answered, but the accepted answer did not work in our situation. IE10 did not recognize/fire the $input.trigger("cleared");
statement.
Our final solution replaced that statement with a 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, not every input on the page. Naturally, IE made this difficult as well... although we had coded <input type="search"...>
, IE rendered them as type="text"
. That's why the jQuery selector references the type="text"
.
Cheers!
Solution 6 - Javascript
We can just listen to the input
event. Please see the reference for details. This is how I fixed an issue with 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
});
}
});
Solution 7 - Javascript
An out of the box solution is to just get rid of the X entirely with CSS:
::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */
This has the following benefits:
- Much simpler solution - fits on one line
- Applies to all inputs so you don't have to have a handler for each input
- No risk of breaking javascript with bug in logic (less QA necessary)
- Standardizes behavior across browsers - makes IE behave same as chrome in that chrome does not have the X
Solution 8 - Javascript
for my asp.net server control
<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 onchange event][1] [1]: http://msdn.microsoft.com/en-us/library/ie/gg592978%28v=vs.85%29.aspx
- tested in IE10.
... or to hide with CSS :
input[type=text]::-ms-clear { display: none; }
Solution 9 - Javascript
The above code was not working in my case and I have 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);
});