javascript - 当用户通过 webkit 取消按钮取消输入时会触发什么事件？

Question

某些浏览器(如 Chrome)在带有 type="search" 的输入中提供了一个额外的搜索取消按钮，如下图所示。

通常带有附加检查的 keyup 足以测试用户是否删除了输入字符串(不考虑右键单击)。然而，如果用户通过 webkit 浏览器提供的特殊取消按钮取消输入，则 keyup 和 change 都不会被触发。

这些取消按钮是否有某种特殊事件？或者我是否必须检查一个已经存在的事件，例如 click？

Answer 1

有一个事件: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.

这是一个工作示例；

$('#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..." />