问如何检测“搜索”HTML5输入的清除？

EN

实际上，每当用户搜索或单击"x“时，都会触发一个"search”事件。这特别有用，因为它理解“增量”属性。

现在，已经说过了，我不确定你是否能区分点击"x“和搜索，除非你使用"onclick”hack。无论哪种方式，希望这对你有所帮助。

Dottoro web reference

Bind search-event the search box，如下所示-

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

我想加上一个“迟到”的答案，因为我今天在change，keyup和search上挣扎，也许我最后发现的可能对其他人也有用。基本上，我有一个搜索类型的面板，我只是想对按下的小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的反应是不同的。特别是，火狐将change视为“输入的每一处变化”，而Chrome则将其视为“当焦点丢失且内容发生变化时”。因此，在Chrome上，“更新面板”函数被调用一次，在FF上，每次按键调用两次(一个在keyup中，一个在change中)。

此外，清除带有小X的字段(不在FF下)会在Chrome: no keyup，no change下触发search事件。

结论是什么？请改用input：

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

它在我测试过的所有浏览器上都有相同的行为，对输入内容的每一个变化都会做出反应(用鼠标复制-粘贴，自动补全和"X“)。