至少在Chrome中，搜索输入的“X”按钮似乎发出了一种不同的事件。

MDN上还声明可以触发InputEvent或Event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

下面的测试。您将看到文本输入将是一个InputEvent，带有包含输入字符的“data”属性，单击X按钮将发出一个Event类型。

document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))

因此，应能区分使用:

if (ev instanceof InputEvent) { ... }

基于js的事件循环，点击clear按钮将在输入时触发搜索事件，因此下面的代码将正常工作:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

上面的代码，点击事件预约了这个。_cleared = false事件循环，但该事件将始终在onsearch事件之后运行，因此您可以稳定地检查this。_cleared状态，以确定用户是否刚刚点击X按钮，然后触发onsearch事件。

这可以在几乎所有的条件下工作，粘贴文本，具有增量属性，ENTER/ESC键按下等。

这里有一种方法。你需要添加增量属性到你的html或它不会工作。

window.onload = function（） { var tf = document.getElementById（'textField'）; var button = document.getElementById（'b'）; 按钮禁用 = 真; var onKeyChange = 函数 textChange（） { 按钮禁用 = （tf.value === “”） ？真 ： 假; } tf.addEventListener（'keyup'， onKeyChange）; tf.addEventListener（'search'， onKeyChange）; } <输入 id=“文本字段” 类型=“搜索” 占位符=“搜索” 增量=“增量”> <按钮 id=“b”>去！</button>

将搜索事件绑定到搜索框，如下所示-

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});

你也可以用一般的方式通过绑定onInput事件处理如下

<input type="search" oninput="myFunction()">

document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMASCRIPT 2016