Are there any events available for the reset option for input search?

Question

In HTML5 there is a new input type, 'search'. On most browser it's just remain to a simple 'text' input, but for webkit based browsers, it adds a little cross to reset the input.

I'd like to be able to handle this, is there an event for that?

Answer 1

This mentions a comment from Ajaxian (WebKit HTML5 Search Inputs):

There are also some custom events too – such as ’search’ which fires when the user pauses typing (set ‘incremental’ to true).

When testing, I found that this 'search' event also gets called when the input is cleared (at least in the latest version of Safari).

Answer 2

It seems miketaylr is correct, it isn't possible to catch this event. See the answer for this question: How do you detect the clearing of a "search" HTML5 input?

For the sake of being standards-compliant and not relying on one feature of one layout engine, I suggest you run your code on an onChange event, if the new text value is empty.

Answer 3

You can listen for the "input" event too, this is more generic than "search" event but still catches the reset option.

Answer 4

No, it's not possible. This UI interaction is some goodness that webkit implements, but is not actually specced. See here. So even if it were possible--you can't expect this UI to be implemented in Gecko, for example, if and when they ever add type=search.

Answer 5

I don't know that this is the correct answer, but the click event handler is called when the user clears the input using the X button.

$('input[type="search"]').click(function(event) {
    // This code runs anytime a user clicks on the input,
    // including when they clear it using the X button.
})

Answer 6

Am not sure, if still someone is looking for a solution. 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.

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

Answer 7

You could add a condition to check if the contents of the search field are empty but this is all no good even with a timeout because it runs the code first then clears the box. The other problem is that the code would not react to the close button when you are editing the field

Answer 8

I suppose u want to capture event when cross button is clicked Here is one solution I found I seems to be working fine(Without setTimeout())

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

Hope this helps!

Answer 9

In my testing with MS Edge, it didn't fire any of these events. I tried input, change, click, and search and they weren't triggered when you click the X. I even tried directly setting input.onchange, input.onclick, etc - still nothing.

The only events that seemed to fire were mousedown and mouseup, but the input's value hadn't been cleared yet so I had to use a setTimeout after detecting the event.

Answer 10

try this hope help you

$("input[name=search-mini]").on("search", function() {
 //do something
});