我还不如把我的5c也加进去。

keyup事件不检测鼠标单击X以清除字段，但输入事件检测击键和鼠标单击。您可以通过检查事件的originalEvent属性来区分触发输入事件的事件—它们之间有相当多的区别。

我发现最简单的方法如下:

jQuery("#searchinput").on("input",function(event) {
      var isclick = event.originalEvent.inputType == undefined;
   }   

通过击键，event.originalEvent.inputType = "insertText"。

我使用Chrome -没有在其他浏览器中测试，但鉴于事件对象是相当普遍的，我猜这将在大多数情况下工作。

注意，仅仅单击输入不会触发事件。

基于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键按下等。

你可以试试fuse.js。在基本配置中，可以通过搜索过滤到许多结果。但是在fuse实例的options对象中有很多调整搜索的可能性:https://fusejs.io/api/options.html

例如:阈值默认为0.6。如果你上升到1，它不会过滤任何东西。如果向下到0，结果中只有精确匹配。尝试一下这些设置。

这是一个在几分钟内实现的客户端搜索，在很多用例中已经足够了。

2022简单，易读，简短的解决方案

哇，这么简单的问题居然有这么复杂的答案。

只需在你的搜索输入中添加一个“输入”监听器，当用户在输入中键入某些内容或单击清除图标时，它就会捕捉到。

document.getElementById（'searchInput'）.addEventListener（'input'， （e） => { console.log（'Input value： “${e.currentTarget.value}”'）; }) <输入 id=“搜索输入” 类型=“搜索” 占位符=“搜索” />

如果你不能使用ES6+，那么下面是转换后的代码:

document.getElementById('searchInput').addEventListener('input', function(e) { 
  // Yay! You make it in here when a user types or clicks the clear icon
})` 

最初的问题是“我能检测到点击‘x’吗?” 这可以通过在搜索事件中“牺牲”Enter来实现。

There are many events firing at different times in the lifecycle of an input box of type search: input, change, search. Some of them overlap under certain circumstances. By default, "search" fires when you press Enter and when you press the 'x'; with the incremental attribute, it also fires when you add/remove any character, with a 500ms delay to capture multiple changes and avoid overwhelming the listener. The trouble is, search generates an ambiguous event with input.value == "", because there are three ways it could have turned empty: (1) "the user pressed the 'x'", (2) "the user pressed Enter on an input with no text", or (3) "the user edited the input (Backspace, cut, etc) till the input became empty, and eventually incremental triggered the search event for the empty input".

消除歧义的最佳方法是将Enter从等式中去掉，只在按下“x”时启动搜索。您可以通过完全压制Enter键来实现这一点。我知道这听起来很傻，但是您可以通过keydown事件(在这里您也可以进行压制)、输入事件或更改事件在更好的控制情况下恢复Enter行为。搜索唯一的独特之处就是点击“x”。

如果您不使用增量，这将消除歧义。如果您使用增量，那么您可以通过输入事件实现大多数增量行为(您只需要重新实现500ms的debounning逻辑)。因此，如果您可以删除增量(或可选地用输入模拟它)，这个问题可以通过使用event.preventDefault()组合搜索和keydown来回答。如果你不能放弃增量，你将继续有上面描述的一些模糊性。

下面是演示这一点的代码片段:

inpEl = document.getElementById("inp"); monitor = document.getElementById("monitor"); function print(msg) { monitor.value += msg + "\n"; } function searchEventCb(ev) { print(`You clicked the 'x'. Input value: "${ev.target.value}"`); } function keydownEventCb(ev) { if(ev.key == "Enter") { print(`Enter pressed, input value: "${ev.target.value}"`); ev.preventDefault(); } } inpEl.addEventListener("search", searchEventCb, true); inpEl.addEventListener("keydown", keydownEventCb, true); <input type="search" id="inp" placeholder="Type something"> <textarea id="monitor" rows="10" cols="50"> </textarea>

在这个简单的代码片段中，您已经将搜索变成了一个专门的事件，它只在您按下'x'时触发，并回答了最初发布的问题。你跟踪输入。值，并按下Enter键。

就我个人而言，我更喜欢在按Enter键时输入ev.target.blur()(模拟输入框失去焦点)，并监视更改事件以跟踪输入。值(而不是监视输入。Value via keydown)。通过这种方式，您可以统一地跟踪输入。焦点变化的值，这可能是有用的。它适用于我，因为我只需要处理输入的事件。价值实际上已经改变了，但它可能并不适用于每个人。

下面是blur()行为的代码片段(现在即使您手动将焦点从输入框移开，也会收到消息，但请记住，只有在实际发生更改时才会看到更改消息):

inpEl = document.getElementById("inp"); monitor = document.getElementById("monitor"); function print(msg) { monitor.value += msg + "\n"; } function searchEventCb(ev) { print(`You clicked the 'x'. Input value: "${ev.target.value}"`); } function changeEventCb(ev) { print(`Change fired, input value: "${ev.target.value}"`); } function keydownEventCb(ev) { if(ev.key == "Enter") { ev.target.blur(); ev.preventDefault(); } } inpEl.addEventListener("search", searchEventCb, true); inpEl.addEventListener("change", changeEventCb, true); inpEl.addEventListener("keydown", keydownEventCb, true); <input type="search" id="inp" placeholder="Type something"> <textarea id="monitor" rows="10" cols="50"> </textarea>

至少在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) { ... }