Event fired when clearing text input on IE10 with clear icon

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

Use input instead. It works with the same behaviour under all the 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 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!

Answer 6

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

Answer 7

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:

1. Much simpler solution - fits on one line
2. Applies to all inputs so you don't have to have a handler for each input
3. No risk of breaking javascript with bug in logic (less QA necessary)
4. Standardizes behavior across browsers - makes IE behave same as chrome in that chrome does not have the X

Answer 8

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 - tested in IE10.

... or to hide with CSS :

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

Answer 9

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