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

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
})` 

我的解决方案是基于onclick事件，在那里我检查输入的值(确保它不是空的)在事件触发的确切时间，然后等待1毫秒，并再次检查值;如果它是空的，那么这意味着清除按钮已经被单击，而不仅仅是输入字段。

下面是一个使用Vue函数的例子:

HTML

<input
  id="searchBar"
  class="form-input col-span-4"
  type="search"
  placeholder="Search..."
  @click="clearFilter($event)"
/>

JS

clearFilter: function ($event) {
  if (event.target.value !== "") {
    setTimeout(function () {
      if (document.getElementById("searchBar").value === "")
        console.log("Clear button is clicked!");
    }, 1);
  }
  console.log("Search bar is clicked but not the clear button.");
},

发现这篇文章，我意识到它有点老了，但我想我可能有一个答案。这处理点击十字，退格和按ESC键。我相信它可以写得更好——我对javascript还是个新手。下面是我最后做的——我使用jQuery (v1.6.4):

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});

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

这里有一种方法。你需要添加增量属性到你的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>