blocks|key|1016615|text|实际上，每当用户搜索或单击"x“时，都会触发一个"search”事件。这特别有用，因为它理解“增量”属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016616|现在，已经说过了，我不确定你是否能区分点击"x“和搜索，除非你使用"onclick”hack。无论哪种方式，希望这对你有所帮助。|1016617|Dottoro+web+reference|offset|length|1016618|entityMap|0|LINK|mutability|MUTABLE|url|http://help.dottoro.com/ljdvxmhr.php^0|0|0|0|L|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>Actually, there is a &quot;search&quot; event that is fired whenever the user searches, or when the user clicks the &quot;x&quot;. This is especially useful because it understands the &quot;incremental&quot; attribute.</p>
<p>Now, having said that, I'm not sure if you can tell the difference between clicking the &quot;x&quot; and searching, unless you use an &quot;onclick&quot; hack. Either way, hopefully this helps.</p>
<p><a href="http://help.dottoro.com/ljdvxmhr.php" rel="nofollow noreferrer">Dottoro web reference</a></p>


blocks|key|1016647|text|使用Pauan的响应，这几乎是可能的。例如。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016648|<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+"+%2B+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>|code-block|syntax|javascript|1016649|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using Pauan's response, it's mostly possible.  Ex.</p>

<pre><code>&lt;head&gt;
    &lt;script type="text/javascript"&gt;
        function OnSearch(input) {
            if(input.value == "") {
                alert("You either clicked the X or you searched for nothing.");
            }
            else {
                alert("You searched for " + input.value);
            }
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    Please specify the text you want to find and press ENTER!
    &lt;input type="search" name="search" onsearch="OnSearch(this)"/&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1016737|text|对我来说，单击X应该算作更改事件是有意义的。我已经完成了onChange事件的所有设置，以完成我需要它做的事情。所以对我来说，解决方法就是简单地做这行jQuery代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016738|$('#search').click(function(){+$(this).change();+});|code-block|syntax|javascript|1016739|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It made sense to me that clicking the X should count as a change event.  I already had the onChange event all setup to do what I needed it to do.  So for me, the fix was to simply do this jQuery line:</p>
<pre><code>$('#search').click(function(){ $(this).change(); });
</code></pre>


blocks|key|1016793|text|Bind+search-event+the+search+box，如下所示-|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1016794|$('input[type=search]').on('search',+function+()+{
++++//+search+logic+here
++++//+this+function+will+be+executed+on+click+of+X+(clear+button)
});|code-block|syntax|javascript|1016795|entityMap^0|5|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Bind <code>search</code>-event the search box as given below-</p>

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


blocks|key|1016878|text|我想加上一个“迟到”的答案，因为我今天在change，keyup和search上挣扎，也许我最后发现的可能对其他人也有用。基本上，我有一个搜索类型的面板，我只是想对按下的小X做出适当的反应(在Chrome和Opera下，FF没有实现它)，并因此清除一个内容窗格。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1016879|我有这样的代码：|1016880|+$(some-input).keyup(function()+{+
++++//+update+panel
+});

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

+$(some-input).on("search",+function()+{+
++++//+update+panel
+});|code-block|syntax|javascript|1016881|(它们是分开的，因为我想检查它们是在什么时候以及在什么情况下调用的)。|1016882|事实证明，Chrome和Firefox的反应是不同的。特别是，火狐将change视为“输入的每一处变化”，而Chrome则将其视为“当焦点丢失且内容发生变化时”。因此，在Chrome上，“更新面板”函数被调用一次，在FF上，每次按键调用两次(一个在keyup中，一个在change中)。|1016883|此外，清除带有小X的字段(不在FF下)会在Chrome:+no+keyup，no+change下触发search事件。|1016884|结论是什么？请改用input：|1016885|+$(some-input).on("input",+function()+{+
++++//+update+panel
+}|1016886|它在我测试过的所有浏览器上都有相同的行为，对输入内容的每一个变化都会做出反应(用鼠标复制-粘贴，自动补全和"X“)。|1016887|entityMap^0|K|6|R|5|X|6|0|0|0|0|Y|6|3G|5|3Q|6|0|W|5|15|6|1E|6|0|9|5|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|U|3|V|5|J|7|1R|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1S|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|Z|$]]

<p>I want to add a &quot;late&quot; answer, because I struggled with <code>change</code>, <code>keyup</code> and <code>search</code> today, and maybe what I found in the end may be useful for others too.
Basically, I have a search-as-type panel, and I just wanted to react properly to the press of the little X (under Chrome and Opera, FF does not implement it), and clear a content pane as a result.</p>
<p>I had this code:</p>
<pre><code> $(some-input).keyup(function() { 
    // update panel
 });

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

 $(some-input).on(&quot;search&quot;, function() { 
    // update panel
 });
</code></pre>
<p>(They are separate because I wanted to check when and under which circumstances each was called).</p>
<p>It turns out that Chrome and Firefox react differently.
In particular, Firefox treats <code>change</code> as &quot;every change to the input&quot;, while Chrome treats it as &quot;when focus is lost AND the content is changed&quot;.
So, on Chrome the &quot;update panel&quot; function was called once, on FF twice for every keystroke (one in <code>keyup</code>, one in <code>change</code>)</p>
<p>Additionally, clearing the field with the small X (which is not present under FF) fired the <code>search</code> event under Chrome: no <code>keyup</code>, no <code>change</code>.</p>
<p>The conclusion? Use <code>input</code> instead:</p>
<pre><code> $(some-input).on(&quot;input&quot;, function() { 
    // update panel
 }
</code></pre>
<p>It works with the same behaviour under all the browsers I tested, reacting at every change in the input content (copy-paste with the mouse, autocompletion and &quot;X&quot; included).</p>


blocks|key|1231605|text|搜索或onclick起作用...但我发现的问题是较旧的浏览器-搜索失败。许多插件(jquery+ui自动完成或fancytree+filter)都有模糊和聚焦处理程序。将其添加到自动完成输入框对我来说很有效(我使用this.value+==+"“，因为它的计算速度更快)。然后，当你点击小'x‘时，模糊焦点会将光标保持在框中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231606|PropertyChange和输入在IE+10和IE+8以及其他浏览器上都有效：|1231607|$("#INPUTID").on("propertychange+input",+function(e)+{+
++++if+(this.value+==+"")+$(this).blur().focus();+
});|code-block|syntax|javascript|1231608|对于FancyTree过滤器扩展，您可以使用reset按钮并强制其单击事件，如下所示：|1231609|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+%7C%7C+$.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("("+%2B+n+%2B+"+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);|1231610|应该能够适应大多数用途。|1231611|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The search  or onclick works... but the issue I found was with the older browsers - the search fails.  Lots of plugins (jquery ui autocomplete or fancytree filter) have blur and focus handlers.  Adding this to an autocomplete input box worked for me(used this.value == "" because it was faster to evaluate).  The blur then focus kept the cursor in the box when you hit the little 'x'.  </p>

<p>The PropertyChange and input worked for both IE 10 and IE 8 as well as other browsers:</p>

<pre><code>$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});
</code></pre>

<p>For FancyTree filter extension, you can use a reset button and force it's click event as follows:</p>

<pre><code>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 &amp;&amp; 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);
</code></pre>

<p>Should be able to adapt this for most uses.</p>


blocks|key|1231641|text|试一下，希望能对你有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231642|$("input[name=search-mini]").on("search",+function()+{
++//do+something+for+search
});|code-block|syntax|javascript|1231643|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this, hope help you</p>

<pre><code>$("input[name=search-mini]").on("search", function() {
  //do something for search
});
</code></pre>


blocks|key|1231699|text|我相信这是唯一的答案，只有当x被点击时才会触发。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231700|然而，这有点老生常谈，ggutenberg的答案适用于大多数人。|1231701|$('#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);
});|code-block|syntax|javascript|1231702|其中'#search-field'是输入的jQuery选择器。使用'input[type=search]'选择所有搜索输入。工作方式是在单击字段后立即检查搜索事件(Pauan的答案)。|offset|length|style|CODE|1231703|entityMap^0|0|0|0|2|F|X|K|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<h3>I believe this is the only answer that fires ONLY when the x is clicked.</h3>
<p>However, it is a bit hacky and ggutenberg's answer will work for most people.</p>
<pre><code>$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log(&quot;clicked x&quot;);
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});
</code></pre>
<p>Where <code>'#search-field'</code> is the jQuery selector for your input. Use <code>'input[type=search]'</code> to select all search inputs. Works by checking for a search event (Pauan's answer) immediately after a click on the field.</p>


blocks|key|1017042|text|在单击TextField交叉按钮(X)时，onmousemove()被触发，我们可以使用此事件来调用任何函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1017043|<input+type="search"+class="actInput"+id="ruleContact"+onkeyup="ruleAdvanceSearch()"+placeholder="Search..."+onmousemove="ruleAdvanceSearch()"/>|code-block|syntax|javascript|1017044|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>On click of TextField cross button(X) onmousemove() gets fired, we can use this event to call any function.</p>

<pre><code>&lt;input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/&gt;
</code></pre>


blocks|key|1231801|text|我知道这是一个古老的问题，但我正在寻找类似的东西。确定单击“X”清除搜索框的时间。这里的答案对我一点帮助都没有。其中一个是关闭的，但当用户点击“enter”按钮时也会受到影响，它将触发与单击“X”相同的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231802|我在另一篇文章中找到了这个答案，它对我来说非常有效，只有当用户清除搜索框时才会触发。|1231803|$("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);
});|code-block|syntax|javascript|1231804|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I know this is an old question, but I was looking for the similar thing. Determine when the 'X' was clicked to clear the search box. None of the answers here helped me at all. One was close but also affected when the user hit the 'enter' button, it would fire the same result as clicking the 'X'.</p>

<p>I found this answer on another post and it works perfect for me and only fires when the user clears the search box.</p>

<pre><code>$("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);
});
</code></pre>


blocks|key|1017209|text|以下是实现这一点的一种方法。您需要向html添加增量属性，否则它将无法工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1017210|​|1017211|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);

}|code-block|syntax|javascript|1017212|<input+id="textField"+type="search"+placeholder="search"+incremental="incremental">
<button+id="b">Go!</button>|1017213|1017214|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here's one way of achieving this. You need to add incremental attribute to your html or it won't work.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="textField" type="search" placeholder="search" incremental="incremental"&gt;
&lt;button id="b"&gt;Go!&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1017242|text|document.querySelectorAll('input[type=search]').forEach(function+(input)+{
+++input.addEventListener('mouseup',+function+(e)+{
++++++++++++++++if+(input.value.length+>+0)+{
++++++++++++++++++++setTimeout(function+()+{
++++++++++++++++++++++++if+(input.value.length+===+0)+{
++++++++++++++++++++++++++++//do+reset+action+here
++++++++++++++++++++++++}
++++++++++++++++++++},+5);
++++++++++++++++}
++++++++++++});
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1017243|ECMASCRIPT+2016|unstyled|1017244|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length &gt; 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}
</code></pre>

<p>ECMASCRIPT 2016</p>


blocks|key|1017296|text|我的解决方案基于onclick事件，在该事件触发的确切时间，我检查输入值(确保它不为空)，然后等待1毫秒，然后再次检查该值；如果该值为空，则意味着已单击clear按钮，而不仅仅是输入字段。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1017297|下面是一个使用Vue函数的示例：|1017298|HTML|1017299|<input
++id="searchBar"
++class="form-input+col-span-4"
++type="search"
++placeholder="Search..."
++@click="clearFilter($event)"
/>|code-block|syntax|javascript|1017300|JS|1017301|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.");
},|1017302|entityMap^0|8|7|0|7|3|0|0|4|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

<p>My solution is based on the <code>onclick</code> event, where I check the value of the input (make sure that it's not empty) on the exact time the event fires and then wait for 1 millisecond and check the value again; if it's empty then it means that the clear button have been clicked not just the input field.</p>
<p>Here's an example using a <code>Vue</code> function:</p>
<p><code>HTML</code></p>
<pre><code>&lt;input
  id=&quot;searchBar&quot;
  class=&quot;form-input col-span-4&quot;
  type=&quot;search&quot;
  placeholder=&quot;Search...&quot;
  @click=&quot;clearFilter($event)&quot;
/&gt;
</code></pre>
<p><code>JS</code></p>
<pre><code>clearFilter: function ($event) {
  if (event.target.value !== &quot;&quot;) {
    setTimeout(function () {
      if (document.getElementById(&quot;searchBar&quot;).value === &quot;&quot;)
        console.log(&quot;Clear button is clicked!&quot;);
    }, 1);
  }
  console.log(&quot;Search bar is clicked but not the clear button.&quot;);
},
</code></pre>


blocks|key|1232042|text|最初的问题是“我能检测到‘x’的点击吗？”这可以通过“牺牲”search事件中的Enter来实现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1232043|在search类型的输入框的生命周期中，有许多事件在不同的时间触发：input、change、search。在某些情况下，它们中的一些是重叠的。默认情况下，当您按Enter键和按‘x’键时会触发"search“；使用incremental属性时，它还会在您添加/删除任何字符时触发，并有500ms的延迟来捕获多个更改并避免使侦听器不堪重负。问题是，search使用input.value+==+""生成一个不明确的事件，因为有三种方法可以将其变为空：(1)“用户按下'x'"，(2)”用户在没有文本的输入上按Enter“，或(3)”用户编辑输入(Backspace，cut等)，直到输入变为空，并最终incremental触发空输入的search事件“。|1232044|消除歧义的最好方法是将Enter从方程式中去掉，并仅在按下'x‘时才让search触发。您可以通过完全取消Enter键来实现此目的。我知道这听起来很愚蠢，但是你可以通过keydown事件(在那里你也可以做抑制)，input事件或者change事件，在更好的控制环境下恢复Enter行为。对于search来说，唯一独特的就是点击“x”。|1232045|如果您不使用incremental，这就消除了歧义。如果你使用incremental，事情是这样的，你可以通过input事件实现大部分的incremental行为(你只需要重新实现500ms的去抖动逻辑)。因此，如果您可以删除incremental+(或者可以选择使用input模拟它)，那么这个问题可以通过search和keydown与event.preventDefault()的组合来回答。如果你不能放弃incremental，你将继续有一些上面描述的模棱两可。|1232046|下面是演示这一点的代码片段：|1232047|​|1232048|inpEl+=+document.getElementById("inp");
monitor+=+document.getElementById("monitor");

function+print(msg)+{
++monitor.value+%2B=+msg+%2B+"\n";
}

function+searchEventCb(ev)+{
++print(`You+clicked+the+'x'.+Input+value:+"${ev.target.value}"`);
}

function+keydownEventCb(ev)+{
++++if(ev.key+==+"Enter")+{
++++print(`Enter+pressed,+input+value:+"${ev.target.value}"`);
++++++++ev.preventDefault();
++++}
}

inpEl.addEventListener("search",+searchEventCb,+true);
inpEl.addEventListener("keydown",+keydownEventCb,+true);|code-block|syntax|javascript|1232049|<input+type="search"+id="inp"+placeholder="Type+something">

<textarea+id="monitor"+rows="10"+cols="50">
</textarea>|1232050|1232051|在这个简单的代码片段中，您已经将search转换为一个专用事件，该事件仅在按下'x‘时触发，并回答了最初发布的问题。您可以使用Enter的keydown跟踪input.value。|1232052|就我个人而言，我更喜欢在按Enter键时放置一个ev.target.blur()+(模拟输入框的焦点丢失)，并监视change事件来跟踪input.value+(而不是通过keydown监视input.value+)。通过这种方式，您可以在焦点更改时统一跟踪input.value，这将非常有用。它对我来说是有效的，因为我只需要在input.value实际发生变化时处理事件，但它可能并不适用于所有人。|1232053|以下是带有blur()行为的代码片段(现在，即使您手动将焦点从输入框移开，您也会收到一条消息，但请记住，只有在实际发生更改时才会看到更改消息)：|1232054|1232055|inpEl+=+document.getElementById("inp");
monitor+=+document.getElementById("monitor");

function+print(msg)+{
++monitor.value+%2B=+msg+%2B+"\n";
}

function+searchEventCb(ev)+{
++print(`You+clicked+the+'x'.+Input+value:+"${ev.target.value}"`);
}

function+changeEventCb(ev)+{
++print(`Change+fired,+input+value:+"${ev.target.value}"`);
}

function+keydownEventCb(ev)+{
++++if(ev.key+==+"Enter")+{
++++++++ev.target.blur();
++++++++ev.preventDefault();
++++}
}

inpEl.addEventListener("search",+searchEventCb,+true);
inpEl.addEventListener("change",+changeEventCb,+true);
inpEl.addEventListener("keydown",+keydownEventCb,+true);|1232056|<input+type="search"+id="inp"+placeholder="Type+something">

<textarea+id="monitor"+rows="10"+cols="50">
</textarea>|1232057|1232058|entityMap^0|U|6|0|Y|5|14|6|1B|6|30|B|4U|6|52|H|8C|B|8T|6|0|Z|6|2C|7|2Y|5|37|6|41|6|0|6|B|V|B|1J|5|1W|B|35|B|3Q|5|4A|6|4H|7|4P|M|5P|B|0|0|0|0|0|0|G|6|1X|7|26|B|0|O|G|1L|6|1W|B|2E|7|2N|B|3L|B|4L|B|0|5|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]|$9|22|A|23|B|C]|$9|24|A|25|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|26|8|@$9|27|A|28|B|C]|$9|29|A|2A|B|C]|$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]|$9|2L|A|2M|B|C]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|2R|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|2S|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|2T|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|R|7|2U|8|@]|D|@]|E|$S|T]]|$1|W|3|O|5|6|7|2V|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|2W|8|@$9|2X|A|2Y|B|C]|$9|2Z|A|30|B|C]|$9|31|A|32|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|33|8|@$9|34|A|35|B|C]|$9|36|A|37|B|C]|$9|38|A|39|B|C]|$9|3A|A|3B|B|C]|$9|3C|A|3D|B|C]|$9|3E|A|3F|B|C]|$9|3G|A|3H|B|C]]|D|@]|E|$]]|$1|11|3|12|5|6|7|3I|8|@$9|3J|A|3K|B|C]]|D|@]|E|$]]|$1|13|3|O|5|6|7|3L|8|@]|D|@]|E|$]]|$1|14|3|15|5|R|7|3M|8|@]|D|@]|E|$S|T]]|$1|16|3|17|5|R|7|3N|8|@]|D|@]|E|$S|T]]|$1|18|3|O|5|6|7|3O|8|@]|D|@]|E|$]]|$1|19|3|-4|5|6|7|3P|8|@]|D|@]|E|$]]]|1A|$]]

<p>The original question is &quot;Can I detect a click of the 'x'?&quot;.
This can be achieved by &quot;sacrificing&quot; Enter in the <code>search</code> event.</p>
<p>There are many events firing at different times in the lifecycle of an input box
of type search: <code>input</code>, <code>change</code>, <code>search</code>. Some of them overlap under certain circumstances. By default, &quot;search&quot; fires when you press Enter and when you press the 'x'; with the <code>incremental</code> attribute, it also fires when you add/remove any character, with a 500ms delay to capture multiple changes and avoid overwhelming the listener.
The trouble is, <code>search</code> generates an ambiguous event with <code>input.value == &quot;&quot;</code>, because there are three ways it could have turned empty: (1) &quot;the user pressed the 'x'&quot;, (2) &quot;the user pressed Enter on an input with no text&quot;, or (3) &quot;the user edited the input (Backspace, cut, etc) till the input became empty, and eventually <code>incremental</code> triggered the <code>search</code> event for the empty input&quot;.</p>
<p>The best way to disambiguate is to take Enter out of the equation, and have <code>search</code> fire only when the 'x' is pressed. You achieve that by suppressing the Enter keypress altogether. I know it sounds silly, but you can get the Enter behavior back under better controlled circumstances via the <code>keydown</code> event (where you'd do the suppressing too), the <code>input</code> event or the <code>change</code> event. The only thing that is unique to <code>search</code> is the 'x' click.</p>
<p>This removes the ambiguity if you don't use <code>incremental</code>. If you use <code>incremental</code>, the thing is, you can achieve most of the <code>incremental</code> behavior with the <code>input</code> event (you'd just need to re-implement the 500ms debouncing logic). So, if you can drop <code>incremental</code> (or optionally simulate it with <code>input</code>), this question is answered by a combination of <code>search</code> and <code>keydown</code> with <code>event.preventDefault()</code>. If you can't drop <code>incremental</code>, you'll continue to have some of the ambiguity described above.</p>
<p>Here's a code snippet demonstrating this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");

function print(msg) {
  monitor.value += msg + "\n";
}

function searchEventCb(ev) {
  print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}

function keydownEventCb(ev) {
    if(ev.key == "Enter") {
    print(`Enter pressed, input value: "${ev.target.value}"`);
        ev.preventDefault();
    }
}

inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="search" id="inp" placeholder="Type something"&gt;

&lt;textarea id="monitor" rows="10" cols="50"&gt;
&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>
<p>In this simple snippet, you've turned <code>search</code> into a dedicated event that fires only when you press 'x', and that answers the question originally posted. You track <code>input.value</code> with the <code>keydown</code> for Enter.</p>
<p>Personally, I prefer to put an <code>ev.target.blur()</code> when pressing the Enter key (simulating a loss of focus for the input box), and monitor the <code>change</code> event to track the <code>input.value</code> (instead of monitoring <code>input.value</code> via <code>keydown</code>). In this way you can uniformly track <code>input.value</code> on focus changes, which can be useful. It works for me because I need to process the event only if the <code>input.value</code> has actually changed, but it might not work for everybody.</p>
<p>Here's the snippet with the <code>blur()</code> behavior (now you'll get a message even if you manually focus away from the input box, but remember, expect to see a change message only if a change actually happened):</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");

function print(msg) {
  monitor.value += msg + "\n";
}

function searchEventCb(ev) {
  print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}

function changeEventCb(ev) {
  print(`Change fired, input value: "${ev.target.value}"`);
}

function keydownEventCb(ev) {
    if(ev.key == "Enter") {
        ev.target.blur();
        ev.preventDefault();
    }
}

inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("change", changeEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="search" id="inp" placeholder="Type something"&gt;

&lt;textarea id="monitor" rows="10" cols="50"&gt;
&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1017482|text|看起来这个问题没有一个好的答案，所以我想我应该添加另一个可能的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1017483|//+Get+the+width+of+the+input+search+field
const+inputWidth+=+$event.path[0].clientWidth;
//+If+the+input+has+content+and+the+click+is+within+17px+of+the+end+of+the+search+you+must+have+clicked+the+cross
if+($event.target.value.length+&&+($event.offsetX+<+inputWidth+&&+$event.offsetX+>+inputWidth+-+17))+{
++++this.tableRows+=+[...this.temp_rows];
}|code-block|syntax|javascript|1017484|更新|1017485|const+searchElement+=+document.querySelector('.searchField');
searchElement.addEventListener('click',+event+=>+{
++//+Get+the+width+of+the+input+search+field
++const+inputWidth+=+$event.path[0].clientWidth;
++//+If+the+input+has+content+and+the+click+is+within+17px+of+the+end+of+the+search+you+must+have+clicked+the+cross
++if+($event.target.value.length+&&+($event.offsetX+<+inputWidth+&&+$event.offsetX+>+inputWidth+-+17))+{
++++this.tableRows+=+[...this.temp_rows];
}
});|1017486|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Looks like there isn't a good answer to this so I thought I would add another possible solution.</p>
<pre><code>// Get the width of the input search field
const inputWidth = $event.path[0].clientWidth;
// If the input has content and the click is within 17px of the end of the search you must have clicked the cross
if ($event.target.value.length &amp;&amp; ($event.offsetX &lt; inputWidth &amp;&amp; $event.offsetX &gt; inputWidth - 17)) {
    this.tableRows = [...this.temp_rows];
}
</code></pre>
<p>Update</p>
<pre><code>const searchElement = document.querySelector('.searchField');
searchElement.addEventListener('click', event =&gt; {
  // Get the width of the input search field
  const inputWidth = $event.path[0].clientWidth;
  // If the input has content and the click is within 17px of the end of the search you must have clicked the cross
  if ($event.target.value.length &amp;&amp; ($event.offsetX &lt; inputWidth &amp;&amp; $event.offsetX &gt; inputWidth - 17)) {
    this.tableRows = [...this.temp_rows];
}
});
</code></pre>


blocks|key|1017535|text|在我的例子中，我不想使用搜索，而且我的输入也是通用的，所以在某些情况下，它可以是‘JQuery’类型，但并不总是如此。根据这里的其他答案之一，我能够在稍微延迟的情况下让它工作。基本上，我希望在单击输入时打开组件，而不是在单击clear按钮时打开组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1017536|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);
};|code-block|syntax|javascript|1017537|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In my case I didn't want to use JQuery and my input was also generic so in some instances it could be of type 'search' but not always. I was able to get it working with a little delay based off one of the other answers in here. Basically I wanted to open a component when the input was clicked but not if the clear button was clicked.</p>
<pre class="lang-js prettyprint-override"><code>function onClick(e: React.MouseEvent&lt;HTMLInputElement&gt;) {
  const target = e.currentTarget;
  const oldValue = target.value;
  setTimeout(() =&gt; {
    const newValue = target.value;
    if (oldValue &amp;&amp; !newValue) {
      // Clear was clicked so do something here on clear
      return;
    }

    // Was a regular click so do something here
  }, 50);
};
</code></pre>


<p>In HTML5, the <code>search</code> input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or jQuery other than, say, detecting when the box is clicked at all or doing some sort of location click-detecting (x-position/y-position)?</p>


How do you detect the clearing of a "search" HTML5 input?

jQuery

HTML5

在HTML5中，search输入类型在右侧带有一个小X，这将清除文本框(至少在Chrome中是这样，在其他浏览器中也是如此)。有没有一种方法可以检测到这个X在Javascript或jQuery中被点击，而不是，比如说，检测这个框被点击的时间，或者做一些位置点击检测(x-position/y-position)？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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