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

对我来说，点击X应该算作一个更改事件是有意义的。我已经设置了onChange事件来做我需要它做的事情。所以对我来说，修复是简单地做这一行jQuery:

$('#search').click(function(){ $(this).change(); });

你似乎不能在浏览器中访问它。搜索输入是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
  }
});

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

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

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

在我的情况下，我不想使用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);
};