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

在HTML5中，搜索输入类型的右边会出现一个小X，这将清除文本框(至少在Chrome中，可能在其他浏览器中)。是否有一种方法来检测这个X在Javascript或jQuery中被点击，而不是检测盒子被点击或做一些位置点击检测(X -position/y-position)?

当前回答

试试这个，希望能帮到你

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

2015-12-23 03:20:51

其他回答

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

现在，话虽如此，我不确定你是否能说出点击“x”和搜索之间的区别，除非你使用“onclick”黑客。不管怎样，希望这对你有所帮助。

多托罗网络参考

2010-09-16 12:41:54

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

来源:

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

2010-06-04 20:55:14

我相信这是唯一的答案，只有当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”是输入的jQuery选择器。使用'input[type=search]'选择所有搜索输入。通过在单击字段后立即检查搜索事件(Pauan的答案)来工作。

2016-01-27 20:42:56

基于js的事件循环，点击clear按钮将在输入时触发搜索事件，因此下面的代码将正常工作:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

上面的代码，点击事件预约了这个。_cleared = false事件循环，但该事件将始终在onsearch事件之后运行，因此您可以稳定地检查this。_cleared状态，以确定用户是否刚刚点击X按钮，然后触发onsearch事件。

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

2017-10-24 04:49:05

根据鲍安的回答，这是有可能的。前女友。

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

2010-10-17 18:23:18

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

推荐文章

最新文章

标签