So I just decided to throw in an <input type="search">
element on a page, and I see Chrome renders a nice little X icon that I can click on to clear the value. It looks like this icon can trigger the change
event, but only when the input
content has changed since the last blur
.
Say I am handling keyup
events to automatically render results as a user types. As they type, results are filtered (automatically firing some ajax during each keyup
event). Then, when the user stops and clicks the X icon, I want to revert back to showing all results.
I can't seem to figure out how to handle this scenario. When the user starts with an empty box, they give it focus and start typing. However when they stop and click chrome's X button, keyup
is not fired (duh). Furthermore, when they blur, the change
event is not fired because the search input is in the same state as it was when it first received focus.
Are there any other events fired when someone clicks this little X icon? Do I have to handle click
as well as keyup
, or is there something more specific?
You're probably looking for the onsearch event which is fired whenever the user searches or the search text is removed by pressing the x
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With