您如何检测清除了“搜索” HTML5输入？

154

在HTML5中，search输入类型显示在右侧，带有一个小的X，它将清除文本框（至少在Chrome中，也许在其他语言中）。除了说根本不检测框何时被单击或进行某种位置单击检测（x位置/ y位置）以外，是否有其他方法可以检测到在Java或jQuery中单击此X的方法？

javascript  jquery  html  events  dom-events 
— 杰森
source
我对HTML 5不太了解，但是它没有onchange活动吗？
— Pekka 2010年
1
好吧，您可以弄清楚是否以这种方式清除了搜索框，但没有找到它是否由于单击该按钮而不是选择和删除而发生
— mVChr 2010年
— Naftali又名Neal
可能的答案stackoverflow.com/a/59389615/11973798检查是否有帮助
— Shubham Khare
你应该添加KEYUP和搜索事件..
— 布拉克Öztürk的

Answers:

104

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

现在，话虽如此，我不确定是否可以分辨单击“ x”和搜索之间的区别，除非您使用“ onclick” hack。无论哪种方式，希望对您有所帮助。

参考文献：

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

— uan
source
2
谢谢，search除了单击“ x”外，无法确定事件发生的时间。它似乎没有在上触发keyup，也没有blur在提交表单时触发。但这应被标记为答案。
— 马克西姆六世。
4
在search当用户按下事件应该火Enter。并且，如果搜索框具有incremental属性，则当用户停止键入一秒钟时，它也会触发。
— Pauan
6
仅供参考：在撰写本评论时，此功能仅在Chrome中有效。
— 杰森
4
IE11触发input事件，但不会触发search事件。
— 2015年
1
“搜索”事件是非标准的。看到这个。我不建议在没有填充的情况下使用它。
— rstackhouse
59

绑定- search事件如下所示的搜索框-

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});
— 莎拉德·比拉达（Sharad Biradar）
source
1
对于那些不确定的人，这是正确的答案
— Erik Grosskurth
6
很高兴知道Chrome支持一个搜索事件，但IE或FF不支持搜索事件，根据MDN的说法，这是一项非标准功能，不在标准轨道上。developer.mozilla.org/en-US/docs/Web/Events/search
— Rich Finelli
50

我想添加一个“迟到”的答案，因为我一直在努力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的反应不同。尤其是，Firefox将其change视为“输入的每次更改”，而Chrome则将其视为“失去焦点且更改内容时”。因此，在Chrome浏览器中“更新面板”函数被调用一次，在FF两次每次击键（一个在keyup一中change）

此外，用小X（在FF下不存在）清除字段会search在Chrome 下触发该事件：no keyup，no change。

结论？使用input来代替：

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

在我测试的所有浏览器中，它都具有相同的行为，对输入内容的每次更改（使用鼠标进行复制粘贴，自动完成和包括“ X”）都会做出反应。

— 洛伦佐·德马特（LorenzoDematté）
source
1
谢谢洛伦佐...这非常有帮助。
— Sterling Bourne 2015年
2
太棒了，简直太棒了。非常感谢，节省了我尝试解决这一问题的时间。
— user2029541 2015年
看来Firefox从此改变了行为？我使用Firefox 42.0进行了测试，它change像Chrome一样对待事件，仅在Enter时触发或失去焦点。
— Suzana
我喜欢on input选项...很好！
— 卡姆·图洛斯
14

使用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>
— 古根伯格
source
5
对我来说，该change事件直到blur基本上都不会触发。只需单击(x)Chrome的搜索字段内部，似乎就不会触发任何事件。经过进一步调查（并阅读下面的评论），我click为我工作。所以$("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });对我有效
— Jannis
2
但$("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });也会在用户单击输入字段时触发。
— 斯科特，
8

我知道这是一个老问题，但我一直在寻找类似的东西。确定何时单击“ X”以清除搜索框。这里的答案都没有帮助我。当用户按下“ enter”按钮时，其中一个关闭但也受到影响，它会触发与单击“ X”相同的结果。

我在另一则文章中找到了这个答案，它对我来说非常理想，只有在用户清除搜索框后才会触发。

$("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);
});
— 迷失在吨
source
5

对我来说，单击X应该算作更改事件。我已经有onChange事件所有设置来执行我需要做的事情。所以对我来说，解决方法是简单地执行以下jQuery行：

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

— 科里·加利亚里（Cory Gagliardi）
source
如果您希望在按下清除按钮时触发此操作，则还可以添加对输入值的检查，例如ala Jannis的注释：stackoverflow.com/questions/2977023/…– if (this.value === "") { ... }
— 山姆
4

您似乎无法在浏览器中访问它。搜索输入是可可NSSearchField的Webkit HTML包装器。取消按钮似乎包含在浏览器客户端代码中，而包装器没有可用的外部引用。

资料来源：

看起来您必须通过单击鼠标的位置来弄清楚，例如：

$('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
  }
});
— 视力
source
好吧，那太烂了。也许我会采用计划B，如果输入现在为空，则运行事件onClick…可能将其放在25ms计时器上
— Jason 2010年
@Jason是的，如果单击发生在X所在的区域，则可以使用我上面输入的代码来运行它。除了检查输入是否为空（如您所说的那样）外，还应满足
— mVChr 2010年
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 = "";
    }
  });
});
— 斯科特·G
source
好像未定义filterVal
— dlsso
1

我相信这是仅在单击x时才会触发的唯一答案。

但是，这有点古怪，古腾堡的答案对大多数人来说都是有效的。

$('#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'您输入的jQuery选择器在哪里。使用'input[type=search]'选择所有搜索输入。单击字段后，立即检查搜索事件（Pauan的答案）即可工作。

— dlsso
source
1

完整解决方案在这里

单击搜索x时，将清除搜索。或在用户按下Enter键时调用Search api匹配。可以使用其他esc keyup事件匹配器进一步扩展此代码。但这应该做得到。

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

干杯。

— 塔兰迪普·辛格（Tarandeep Singh）
source
1

基于js的事件循环，clickon clear按钮将触发input上的search事件，因此以下代码将按预期工作：

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状态以确定用户是否只是单击了X按钮然后触发了一个onsearch事件。

这几乎可以在所有条件下工作，粘贴文本，具有增量属性，按ENTER / ESC键等。

— 杨
source
1

这是实现这一目标的一种方法。您需要向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>
展开摘要

— 雷文思
source
1 
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);
                }
            });
}

ECMASCRIPT 2016

— realmag777
source
0

搜索或onclick可以工作...但是我发现的问题与较旧的浏览器有关-搜索失败。许多插件（jquery ui自动完成或fancytree过滤器）具有模糊和焦点处理程序。将其添加到自动完成输入框对我有用（使用this.value ==“”，因为它可以更快地进行评估）。当您击中小“ x”时，模糊然后聚焦使光标停留在框中。

PropertyChange和输入适用于IE 10和IE 8以及其他浏览器：

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

对于FancyTree过滤器扩展，可以使用重置按钮并强制其click事件，如下所示：

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);

应该能够适应大多数用途。

— 理查德·杜福
source
-2

单击TextField交叉按钮（X）时，onmousemove（）被触发，我们可以使用此事件来调用任何函数。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
— priyaranjan sahoo
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.