What event is triggered when the user cancels input via the webkit cancel button?

Question

Some browsers like Chrome provide an additional search cancel button on inputs with type="search", as seen in the picture below.

Usually the keyup with an additional check is sufficient to test whether the user deleted the input string (not taking right click into account). However neither keyup nor change get triggered if the user cancels the input via the special cancel button provided by webkit browsers.

Is there some kind of special event for those cancel buttons? Or do I have to check one of the already existing events like click?

Screenshot of chrome

I've deleted all the previous comments as they were all basically rude/not constructive or, now that the post has been edited, obsolete. — ChrisF, Apr 24 '13 at 12:21

Emre Erkan · Accepted Answer · 2020-02-05T10:27:18.373

32

There is an event for this: oninput.

Occurs when the text content of an element is changed through the user interface.

The oninput is useful if you want to detect when the contents of a textarea, input:text, input:password or input:search element have changed, because the onchange event on these elements fires when the element loses focus, not immediately after the modification.

Here is a working example;

$('#search').on('input', function(e) {
  if('' == this.value) {
    alert('Please enter a search criteria!');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="search" id="search" placeholder="Search..." />

edited Feb 05 '20 at 10:27

answered Apr 24 '13 at 11:50

Emre Erkan

8,433
3
48
53

I keep forgetting this one... I believe it can also be used when pasting stuff from a handheld scanner – mplungjan Apr 24 '13 at 12:14
Good solution. Can be used in cases where`keyup` event listener fails to capture the search field's clear action. – NeERAJ TK Dec 02 '22 at 10:04

score 8 · Answer 2 · edited Dec 01 '15 at 20:34

8

There is an event for this: onsearch.

Actions that invoke the onsearch event:

Pressing the ENTER key or clicking the 'Erase search text' button in a search control.

Here is an example:

HTML:

<input type="search" name="search" id="search" placeholder="Search..." />

jQuery:

$('#search').on('search', function(e) {
    if('' == this.value) {
        alert("You either clicked the X or you searched for nothing.");
    }
});

edited Dec 01 '15 at 20:34

Keith.Abramo

6,952
2
32
46

answered Apr 24 '13 at 12:34

MythThrazz

1,629
17
25

Seems odd to me that `clicking the 'Erase search text' button` would trigger a 'search' event. Why would they do that? – Robin van Baalen Apr 24 '13 at 12:45
@RobinvanBaalen to allow you the developer to handle the input being empty and giving you the full control you need to decide what a 'search' event is? – Dave Jellison Sep 23 '13 at 22:39
This definitely works in webkit so it's an appropriate answer; however, it won't work in ie10+ – m1. Sep 04 '14 at 18:21

score 1 · Answer 3 · answered Apr 24 '13 at 11:39

1

Listening to the click event seems to work in my Fiddle:

http://jsfiddle.net/S5n84/1/

HTML

<input type="search" value="hello" />
<span id="status"></span> <!-- Just an example -->

Javascript

$("input").on("click keyup", function () {
    if ($(this).val() == "") {
        $("#status").text("WTF it's empty..");   
    } else {
        $("#status").text($(this).val());   
    }
});

answered Apr 24 '13 at 11:39

Robin van Baalen

3,632
2
21
35

Almost! Thanks. How about when user clicks the input for the first time and is already empty? – Damien Roche Apr 24 '13 at 11:41
Then, you have an empty field and thus the error shows. That makes perfect sense, right? – Robin van Baalen Apr 24 '13 at 11:42
@Zenph Store a `dirty` flag in data for that. – VisioN Apr 24 '13 at 11:43
If I wanted to trigger every click, then yes, makes perfect sense. But I don't ;) To clarify - I am clearing a search field, and clearing ajax filters. This will perform an ajax query on initial click of field. – Damien Roche Apr 24 '13 at 11:44
@DipeshParmar you can mix and match as many events as you want in one `.on()` listener. But for readability it's recommended that you only combine events that do make sense together. Inside the event handler, you can do an `event.type` to get the actual event that was triggered. – Robin van Baalen Apr 24 '13 at 11:50
Hi Robin, I've voted up this answer as it was initially my desired solution, but @Emre Erkan's answer is correct approach. Thanks for the input. – Damien Roche Apr 24 '13 at 12:10
@Zenph true, it is the correct approach. I gave him an upvote as well. – Robin van Baalen Apr 24 '13 at 12:43

nbrooks · Answer 4 · 2013-04-24T11:55:59.737

0

Capture the 'change' event, rather than the 'keyup' event. When the value of the text field changes this fires, and you can check if the value is blank.

$('input[type="search"]').on('change', function() {
    if ($(this).val() == "") {
        alert('clear');
    }
});

http://jsfiddle.net/Ebg4M/

edited Apr 24 '13 at 11:55

answered Apr 24 '13 at 11:33

nbrooks

18,126
5
54
66

onChange only fires when the input field blurs. – Robin van Baalen Apr 24 '13 at 11:34
That doesn't detect changes on `keyup`, or when a user clicks the 'x' icon to clear the field. Chrome appears to add this icon with html5 search fields. – Damien Roche Apr 24 '13 at 11:34
@Zenph if you want people to help you, maybe you should provide some example code where you show that 'keyup' isn't working and where your magic 'x' is showing. Most people don't know what you're talking about here. – Robin van Baalen Apr 24 '13 at 11:36
even `$('input[type="text"]').on('change',` is same as `$('input[type="text"]').change` – Dipesh Parmar Apr 24 '13 at 11:37
@RobinvanBaalen I'm concerned that people have read the question, clearly seen me mention html5 inputs and this 'x' icon, and don't know what I'm talking about!? – Damien Roche Apr 24 '13 at 11:46
@Zenph your concern is correct. But even then; a code example is always more than welcome on SO. – Robin van Baalen Apr 24 '13 at 11:47
@zenph This will detect changes when the icon is clicked. The text field gains focus when the icon is clicked, and the change event fires the the field loses focus. – nbrooks Apr 24 '13 at 11:48

score 0 · Answer 5 · edited May 23 '17 at 11:46

0

At first, when it wasn't obvious that the OP thought of <input type="search"> (how silly of me that I didn't read his mind) I thought it maybe the answer.

I guess that the 'x' is not a standard part of the input field (HTML5 or not).

It's probably some site element added externally, that's why you may be interested in this answer: https://stackoverflow.com/a/6258628/2107024

Edit:

After research I found out that clicking the x on Chrome fires the click event. Also the answers in this similar thread: How do you detect the clearing of a "search" HTML5 input? suggest that the search event is fired aswell.

edited May 23 '17 at 11:46

Community

1
1

answered Apr 24 '13 at 11:49

MythThrazz

1,629
17
25

Afraid it is standard to Chrome, at least. – Damien Roche Apr 24 '13 at 11:52
Maybe you should read into HTML5 form elements before guessing. The X is a part of an HTML5 search type field in Webkit based browsers. – Robin van Baalen Apr 24 '13 at 11:52
2

Maybe provide code so it's obvious that you're asking about `` not `` and people who want to help you don't have to guess? -_-' – MythThrazz Apr 24 '13 at 11:54
I guess noone will ever read about `onsearch` event which does almost the same as the selected answer because of that downvotes. – MythThrazz Apr 24 '13 at 12:17

mplungjan · Answer 6 · 2013-04-24T12:25:00.920

Here is an alternative to oninput which will monitor the field while it is focussed

DEMO

function tell(fld,id) {
    $("#"+id).html((fld.val()==""?"Clear":"Not clear")+" - "+new Date())
}
$(function() {
    $("#search").on("focus",function() {
        var srch = $(this);
        var tId = setInterval(function() { tell(srch,"status") },100);
        $(this).data("tId",tId);
    })
    .on("blur",function() {
        clearInterval($(this).data("tId"));
     });
    tell($("#search"),"status");
});

score 0 · Answer 7 · edited May 23 '17 at 12:32

0

You can use bind to capture multiple events as Eric Warnke demonstrated in jQuery .keyup() vs .change() vs .bind()

Here's a forked fiddle based on Emre Erkan's:

$('#search').bind("change keyup input", function(e) {
    if('' == this.value) {
        alert('Please enter a search criteria!');
    }
});

edited May 23 '17 at 12:32

Community

1
1

answered Nov 18 '14 at 19:11

Karl Kieninger

8,841
2
33
49

What event is triggered when the user cancels input via the webkit cancel button?

7 Answers7