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?

Answer 1

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..." />