完整的解决方案在这里

这将在单击搜索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();  
    }
  }
});

欢呼。

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

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

点击TextField交叉按钮(X) onmousemove()被触发，我们可以使用这个事件来调用任何函数。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>

你似乎不能在浏览器中访问它。搜索输入是Cocoa NSSearchField的Webkit HTML包装器。取消按钮似乎包含在浏览器客户机代码中，而包装器中没有可用的外部引用。

来源:

http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890 http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state http://dev.w3.org/html5/markup/input.search.html#input.search

看起来你必须通过点击鼠标位置来解决这个问题，比如:

$('input[type=search]').bind('click', function(e) {
  var $earch = $(this);
  var offset = $earch.offset();

  if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
    // your code here
  }
});

我想补充一个“晚”的答案，因为我今天在改变、keyup和搜索方面很挣扎，也许我最后发现的东西对其他人也有用。 基本上，我有一个搜索类型面板，我只是想对小X的压力做出正确的反应(在Chrome和Opera下，FF没有实现它)，并清除内容面板作为结果。

我有这样的代码:

 $(some-input).keyup(function() { 
    // update panel
 });

 $(some-input).change(function() { 
    // update panel
 });

 $(some-input).on("search", function() { 
    // update panel
 });

(它们是分开的，因为我想检查在什么时候以及在什么情况下调用它们)。

事实证明Chrome和Firefox的反应是不同的。 特别是，Firefox将更改视为“对输入的每一次更改”，而Chrome则将其视为“当焦点丢失和内容更改时”。 因此，在Chrome上的“更新面板”函数被调用一次，在FF上的每一次击键都被调用两次(一次在keyup，一次在change)

此外，用小X清除字段(在FF下不存在)在Chrome下触发搜索事件:没有keyup，没有变化。

结论?使用input代替:

 $(some-input).on("input", function() { 
    // update panel
 }

在我测试的所有浏览器中，它都具有相同的行为，对输入内容的每一次更改都做出反应(包括使用鼠标复制粘贴、自动补全和“X”)。

我的解决方案是基于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.");
},