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?

Cart

Possible duplicate : #2493222 – Korry

Nope, this one is all about IE10. On webkit, I know how to handle this. – Cart

There's no event fired in IE10 when clearing the field. – Korry

Quick shot, haven't read the spec on search inputs in ages, but: can you watch the 'input' event instead? – Takao

Hmm, might still be worth a try but looks like IE also has a buggy 'input' event: help.dottoro.com/ljhxklln.php (fired only when text is added, not when removed!) – Takao

I created a test page where I added a callback to every single event on a text input in javascript : no event is fired except click events. – Cart

@Cart the 'input' event gets fired. – Yearbook

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

Cart

Thanks Ghusse! If someone comes up with any other solution (without the setTimeout), let me know. – Uteutensil

This works for ASP.NET / jQuery / IE11 as well. Instead of $("input").bind("mouseup", function(e){ you need to use $('#<% = MyTextBox.ClientID %>').mouseup(function (){ – Wicks

The solution by Lucent below works for me in IE11. His solution is to use the oninput event instead. When you press the X icon the input event fires. – Ullman

shouldn't the if statement be if (oldValue === "")? – Strategic

While the solution by Lucent with the input-event works, this solution is superior in that it only fires when the element was cleared, while Lucent's also fires when the cursor enters the element, leaves the element, and also when data has been entered. – Vedi

If you are on lower versions for IE (<10), go ahead with this solution. I tried oninput on IE8 but doesn't work! – Hyperbolism

At last found solution here and it is working for me in IE. Thank you. – Savitt

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.

Auspicious

this works for me too in IE10, don't think earlier versions on IE have a clear field button, so should only need to work for IE10 – Strickler

Works in IE11 aswell! – Chauchaucer

This works in Chrome and Firefox as well and also fires when the user right clicks mouse and cuts the value. To hook up use this: inputEl.addEventListener('input', function(){ /* DoSomething */ }). – Biddable

Answer 3

Use input instead. It works with the same behaviour under all the browsers.

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

Misha

Does not work in IE 11 in Document Mode 5, Closing bracket missing, btw. – Mercymerdith

Answer 4

Why not

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

Bassesalpes

What if the user simply removed some text with his keyboard? – Cart

@Cart You can also clear a text field with a click and drag, without using that button. So accepted anwer will also fail. I guess OP asked the question because when a user presses clear field button, he wants to be notified with an event. – Bassesalpes

With a click and a drag, I cannot see how to clear a text field except by pushing the del button of your keyboard. – Cart

@Cart Please select all of the text and try to drag to other text box. If that is not working for you try with Alt key pressed. – Bassesalpes

seems that this is the better answer at the end of the day, though maybe not 100% specific to the question. Seems to cover all kinds of cases, even auto completes from chrome. – Anaphase

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!

Civvies

brilliant, worked for me, although i triggered keyup instead (my code looks for 2 chars and automatically searches on keyup) – Rewarding

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

Semitone

This answer works for MS Edge, the "input" event is fired when clicking the "x" to clear the search field. – Dissemblance

I'm using vanilla js and MS Edge doesn't fire the input event when clicking the X. I guess it was a bad idea anyway to try to watch such event. Better use a button like normal forms. – Readable

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

Hackle

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

Desman

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

Avon