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?

Solution 1

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.

Solution 2

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

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

Solution 4

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

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

View more solutions

Comments

[Boris Guéry]

This wouldn't be a problem, I mean with feature dectection, it'll just add nice a way to reset an input and dispatch some things on event.

[miketaylr]

Sure. Except there's no feature to detect--unless you're doing some browser sniffing for Webkit on top of feature detecting type=search. However, remember that there is no event for the feature you're describing so its a moot point.

[Boris Guéry]

The problem is we have no way to know if the user is actually clicking on the cross to clean his input or to edit it.

[Jonathan Morgan]

I agree with Boris. Also, beware: IE 10 doesn't seem to fire a "click" event when its new X button is clicked - just mousedown and mouseup. Even after mouseup has been fired, the value still hasn't been changed to empty.

[Jonathan Morgan]

The change event only fires after the text input has lost focus: if you are updating anything incrementally the user will expect it to update immediately after clicking the X button, rather than waiting until focus is lost.

[Mottie]

Only the "input" event is fired when clicking on the "x" in MS Edge.