16

In Internet Explorer, there is a little x-like button is shown, when you start typing in the textbox. How do I detect the event when this icon is clicked on? Is there an event-type?

<input type="text" value ="" id ="qsearch" name="qsearch"
    onBlur="qsearchLookup(this.value);" OnClick="qsearchLookup(this.value);"
    onkeyup="qsearchLookup(this.value)"  size="26">

function qsearchLookup(searchVal){
    document.getElementById("qsearch").value="";
}

enter image description here

braX
  • 11,506
  • 5
  • 20
  • 33
Andrew
  • 7,619
  • 13
  • 63
  • 117

4 Answers4

12

I do not know about special event for this small x-like button, and I don't think that it exists, but you can use input event (oninput="qsearchLookup(this.value)" in your case) to catch this change.

outcoldman
  • 11,584
  • 2
  • 26
  • 30
  • I added image; seems like event is not catching it – Andrew Apr 06 '13 at 01:55
  • 3
    It works in IE10, and I thought that this (x) button exists only in IE10. I don't think that IE has special DOM element for this button or event, but if you want you can hide it with special css: `::-ms-clear { display: none; }` – outcoldman Apr 06 '13 at 04:29
8

Am not sure, if still someone is looking for a solution. Unfortunately there is no event handler available for the clear(X) icon, however below code snippet/tricks worked for me. CSS to complete hide the clear(X) icon and if you don't want to hide the clear(X) icon but need to handle then JS code snippet would help.Verified in IE 8,9,10,11 and it works fine

CSS trick:

#textFieldId::-ms-clear {display: none;} -- For a particular text field

or

input[type=text]::-ms-clear { display: none; } -- for all text fields in scope

OR

JavaScript trick (to reset the text field value to empty/blank and fire the html event KeyUp. Accordingly you can change per your need)

$('#textFieldId').bind("mouseup", function() {
        var $input = $(this);
        var oldValue = $input.val();
        if (oldValue == "") {
            return;
        }
        setTimeout(function() {
            var newValue = $input.val();
            if (newValue == "") {
                $input.trigger("keyup");
            }
        }, 1);
    });
Community
  • 1
  • 1
Sunil Kumar Das
  • 109
  • 1
  • 2
  • Thanks. This JS was the only thing I could get working in Edge (IE11 was already working for me via another event somehow). Would never have thought of the Timeout part myself (ridiculous this is seemingly required). – Max Starkenburg Jan 17 '20 at 18:00
0

This worked pretty well for me :)

$input.addEventListener('mouseup', function(){
    setTimeout(function(){
        if ($input.value === '') do_stuff();
    }, 1)
});

$input being a reference to the input element.

Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64
-1
input.on('input propertychange',function(e){})

this works for ie10 (input) and ie8 (propertychange) but not for ie9

i actually fixed it for ie9 with the mousedown event, not pretty ,but that and mouseup are the only events that fire on it

Георги Петрунов
  • 1
  • 1