The application I am currently working on uses a lot of AJAX calls to GET and POST data to and from the server. One of the features is an auto-completing search. We have a list of items, the user can type in some text and the list automatically filters itself.

Along comes IE10 with some nice usability features that allow the user to clear an input by clicking (or touching!) a little ‘x’ icon that sits inside the input element.

ie10

X marks the spot in the screenshot above. This is a nice feature to have but there is one problem. When the user interacts with the button, no events are fired!

The only hooks I found are the ‘mouseup’ and ‘mousedown’ events (but we had those already Annoyed.. so yeah).

Here is a little hack to trigger a ‘change’ event when the user clears the textbox using the ‘x’ button utilizing jQuery.

$(document).ready(function () {
    $('input').bind('mouseup', function (e) {
        var $input = $(this);

        if ($input.val() == '') {
            return;
        }

        // Wait for it....
        setTimeout(function () {
            if ($input.val() == '') {
                $input.change();
            }
        }, 5);
    });
});

A quick rundown. We bind to input elements (this could use a more restrictive selector) and listen for the ‘mouseup’ event (when the user releases their click). If the input already had an empty string as a value, we exit and don’t check anything else.

If the text was not found empty, we let the code wait for just a tiny bit of time and when we are done waiting we check the value of the input. If it is empty, the user most likely clicked the ‘x’ button to clear the input.

Why the setTimeout? The clearing of the input is not instant so we need to wait for the input to be cleared if the user clicked on the ‘x’ button. The 5ms is a value I choose to wait. I’m not sure if longer is required (I think not) and didn’t bother checking if I could go lower.

Sander Harrewijnen

Author Sander Harrewijnen

Als ontwikkelaar mag ik graag problemen oplossen en nieuwe functionaliteit bouwen. Vanuit mijn creatieve kant hou ik me ook graag bezig met hoe iets bij de eindgebruiker aankomt. Je kunt bij mij dus ook terecht voor de opmaak en layout van een oplossing. Als je mij wilt afleiden, dan lukt dat altijd met een coole nieuwe gadget. Dat is namelijk mijn andere passie.

More posts by Sander Harrewijnen
13 May 2013

Leave a Reply