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

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

当前回答

发现这篇文章，我意识到它有点老了，但我想我可能有一个答案。这处理点击十字，退格和按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 = "";
    }
  });
});

2012-07-19 18:54:46

其他回答

你也可以用一般的方式通过绑定onInput事件处理如下

<input type="search" oninput="myFunction()">

2022-03-16 12:16:52

对我来说，点击X应该算作一个更改事件是有意义的。我已经设置了onChange事件来做我需要它做的事情。所以对我来说，修复是简单地做这一行jQuery:

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

2010-11-18 17:05:53

将搜索事件绑定到搜索框，如下所示-

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

2013-02-27 10:18:13

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

<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

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

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

多托罗网络参考

2010-09-16 12:41:54

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

推荐文章

最新文章

标签