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

Answer 1

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

Answer 2

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 3

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 4

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 5

try this hope help you

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

Answer 6

This page: http://css-tricks.com/webkit-html5-search-inputs/ mentions a comment from Ajaxian:

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).