如何检测“search”HTML5input的清除?

在HTML5中, searchinputtypes会在右侧显示一个X,以清除文本框(至less在Chrome中,也可能是其他)。 有没有一种方法来检测,当这个X被点击在JavaScript或jQuery以外,比如说,检测何时单击框或做某种位置点击检测(X位置/ Y位置)?

实际上,每当用户search,或用户点击“x”时,都会触发“search”事件。 这是特别有用的,因为它理解“增量”属性。

现在,说了这些,我不确定你是否可以说出点击“x”和search之间的区别,除非你使用“onclick”黑客。 无论哪种方式,希望这有助于。

参考文献:

http://help.dottoro.com/ljdvxmhr.php

绑定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似乎被包含在浏览器客户端代码中,而外部引用不可用。

资料来源:

看起来你必须通过点击鼠标位置来找出它,例如:

 $('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()"/>