如何检测“search”HTML5input的清除？
在HTML5中， searchinputtypes会在右侧显示一个X，以清除文本框（至less在Chrome中，也可能是其他）。 有没有一种方法来检测，当这个X被点击在JavaScript或jQuery以外，比如说，检测何时单击框或做某种位置点击检测（X位置/ Y位置）？
实际上，每当用户search，或用户点击“x”时，都会触发“search”事件。 这是特别有用的，因为它理解“增量”属性。
现在，说了这些，我不确定你是否可以说出点击“x”和search之间的区别，除非你使用“onclick”黑客。 无论哪种方式，希望这有助于。
参考文献：
绑定search – 在下面给出的search框中，
$('input[type=search]').on('search', function () { // search logic here // this function will be executed on click of X (clear button) });
我想添加一个“迟到”的答案，因为我今天挣扎于change ，关键和search ，也许我发现最终可能对其他人有用。 基本上，我有一个类似于search的面板，我只是想对小X（在Chrome和Opera下，FF没有实现它）进行正确的反应，并清除内容窗格。
我有这样的代码：
$(some-input).keyup(function() { // update panel } $(some-input).change(function() { // update panel } $(some-input).on("search", function() { // update panel }
（他们是分开的，因为我想检查什么时候在什么情况下被称为）。
事实certificate，Chrome和Firefox的反应不同。 特别是，Firefox会将change视为“input的每一次更改”，而Chrome会将其视为“重点丢失，内容更改时”。 所以，在Chrome上，“更新面板”function被调用一次，每次击键都会FF两次（一次在键盘上，一次在change ）
另外，用小X（FF下不存在）清除字段在Chrome下激发search事件：没有keyup ，没有change 。
结论？ 改用input ：
$(some-input).on("input", function() { // update panel }
它在所有我testing过的浏览器下都有相同的行为，在input内容的每一个变化（对鼠标的复制粘贴，包括自动完成和“X”）做出反应。
使用Pauan的回应，这大都是可能的。 防爆。
<head> <script type="text/javascript"> function OnSearch(input) { if(input.value == "") { alert("You either clicked the X or you searched for nothing."); } else { alert("You searched for " + input.value); } } </script> </head> <body> Please specify the text you want to find and press ENTER! <input type="search" name="search" onsearch="OnSearch(this)"/> </body>
它似乎并不像你可以在浏览器中访问这个。 searchinput是Cocoa NSSearchField的Webkit HTML包装器。 取消button似乎被包含在浏览器客户端代码中，而外部引用不可用。
资料来源：
- 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 } });
点击X应该算作变化事件，这对我来说是有意义的。 我已经有了onChange事件的所有设置来做我需要做的事情。 所以对我来说，解决的办法是简单地做这个jQuery线：
$('#search').click(function(){ $(this).change(); });
我知道这是一个古老的问题，但我正在寻找类似的东西。 确定何时单击“X”以清除search框。 这里没有任何答案帮助我。 一个是closures的，但是当用户点击“进入”button时也会受到影响，点击“X”会触发相同的结果。
我在另一篇文章中发现了这个答案，它适用于我，只有当用户清除search框时才会触发。
$("input").bind("mouseup", function(e){ var $input = $(this), oldValue = $input.val(); if (oldValue == "") return; // When this event is fired after clicking on the clear button // the value is not cleared yet. We have to wait for it. setTimeout(function(){ var newValue = $input.val(); if (newValue == ""){ // capture the clear $input.trigger("cleared"); } }, 1); });
发现这篇文章，我意识到这是有点老，但我想我可能有一个答案。 这处理十字，退格和击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 = ""; } }); });
search或onclick工作…但我发现的问题是与旧的浏览器 – search失败。 很多插件（jQuery UI自动完成或fancytreefilter）有模糊和焦点处理程序。 添加到一个自动完成的input框为我工作（使用this.value ==“”，因为它评估更快）。 模糊然后焦点保持光标在箱子当您点击小'x'。
PropertyChange和input对IE 10和IE 8以及其他浏览器都有效：
$("#INPUTID").on("propertychange input", function(e) { if (this.value == "") $(this).blur().focus(); });
对于FancyTreefilter扩展，您可以使用重置button并强制它的单击事件，如下所示：
var TheFancyTree = $("#FancyTreeID").fancytree("getTree"); $("input[name=FT_FilterINPUT]").on("propertychange input", function (e) { var n, leavesOnly = false, match = $(this).val(); // check for the escape key or empty filter if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") { $("button#btnResetSearch").click(); return; } n = SiteNavTree.filterNodes(function (node) { return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match); }, leavesOnly); $("button#btnResetSearch").attr("disabled", false); $("span#SiteNavMatches").text("(" + n + " matches)"); }).focus(); // handle the reset and check for empty filter field... // set the value to trigger the change $("button#btnResetSearch").click(function (e) { if ($("input[name=FT_FilterINPUT]").val() != "") $("input[name=FT_FilterINPUT]").val(""); $("span#SiteNavMatches").text(""); SiteNavTree.clearFilter(); }).attr("disabled", true);
应该能够适应大多数用途。
试试这个，希望能帮到你
$("input[name=search-mini]").on("search", function() { //do something for search });
我相信这是唯一的答案，只有当点击x点燃。
然而，这有点冒失，ggutenberg的答案将适用于大多数人。
$('#search-field').on('click', function(){ $('#search-field').on('search', function(){ if(!this.value){ console.log("clicked x"); // Put code you want to run on clear here } }); setTimeout(function() { $('#search-field').off('search'); }, 1); });
其中'#search-field'是您input的jQueryselect器。 使用'input[type=search]'来select所有的searchinput。 在点击该字段后立即检查search事件（Pauan的答案）。
完整解决scheme在这里
当searchx被点击时，这将清除search。 或者在用户点击input时调用searchapi命中。 这段代码可以通过额外的esc keyup事件匹配器进一步扩展。 但这应该做的一切。
document.getElementById("userSearch").addEventListener("search", function(event){ if(event.type === "search"){ if(event.currentTarget.value !== ""){ hitSearchAjax(event.currentTarget.value); }else { clearSearchData(); } } });
干杯。
基于js的事件循环， click清除button将触发search事件的input ，所以下面的代码将按预期工作：
input.onclick = function(e){ this._cleared = true setTimeout(()=>{ this._cleared = false }) } input.onsearch = function(e){ if(this._cleared) { console.log('clear button clicked!') } }
上面的代码， onclick事件预订了一个this._cleared = false事件循环，但事件总是在 onsearch事件之后运行的，所以你可以稳定的检查这个this._cleared状态来判断用户是否点击了Xbutton，然后触发了一个onsearch事件。
这可以在几乎所有条件下工作， 粘贴文本 ，具有增量属性， ENTER / ESC键等。
这是实现这一点的一种方法。 您需要将增量属性添加到您的HTML，否则将无法正常工作。
window.onload = function() { var tf = document.getElementById('textField'); var button = document.getElementById('b'); button.disabled = true; var onKeyChange = function textChange() { button.disabled = (tf.value === "") ? true : false; } tf.addEventListener('keyup', onKeyChange); tf.addEventListener('search', onKeyChange); }
<input id="textField" type="search" placeholder="search" incremental="incremental"> <button id="b">Go!</button>
点击TextField十字键（X）onmousemove（）被触发，我们可以使用这个事件来调用任何函数。
<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
