在我的情况下，我不想使用JQuery和我的输入也是通用的，所以在某些情况下，它可以是类型“搜索”，但并不总是这样。我可以让它稍微延迟一点基于这里的另一个答案。基本上，我想在单击输入时打开一个组件，而不是在单击clear按钮时打开。

function onClick(e: React.MouseEvent<HTMLInputElement>) {
  const target = e.currentTarget;
  const oldValue = target.value;
  setTimeout(() => {
    const newValue = target.value;
    if (oldValue && !newValue) {
      // Clear was clicked so do something here on clear
      return;
    }

    // Was a regular click so do something here
  }, 50);
};

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时清除搜索。 或 当用户按回车键时，将调用搜索API。 这段代码可以通过附加的esc键up事件匹配器进一步扩展。但是这个应该能搞定。

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

欢呼。

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

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

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

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

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

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

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

最初的问题是“我能检测到点击‘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>

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