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.

Related articles

  • Cloud Native
  • Application Navigator
  • Kubernetes Platform
  • Digital Workspace
  • Cloud Infrastructure
  • ITTS (IT Transformation Services)
  • Managed Security Operations
  • Multi-Cloud Platform
  • Backup & Disaster Recovery
Visit our knowledge hub
Visit our knowledge hub
Sander Harrewijnen Developer

Let's talk!

Knowledge is key for our existence. This knowledge we use for disruptive innovation and changing organizations. Are you ready for change?

"*" indicates required fields

First name*
Last name*
Hidden