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

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

当前回答

我想补充一个“晚”的答案，因为我今天在改变、keyup和搜索方面很挣扎，也许我最后发现的东西对其他人也有用。基本上，我有一个搜索类型面板，我只是想对小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将更改视为“对输入的每一次更改”，而Chrome则将其视为“当焦点丢失和内容更改时”。因此，在Chrome上的“更新面板”函数被调用一次，在FF上的每一次击键都被调用两次(一次在keyup，一次在change)

此外，用小X清除字段(在FF下不存在)在Chrome下触发搜索事件:没有keyup，没有变化。

结论?使用input代替:

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

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

2014-08-29 14:00:06

其他回答

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

$('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

我的解决方案是基于onclick事件，在那里我检查输入的值(确保它不是空的)在事件触发的确切时间，然后等待1毫秒，并再次检查值;如果它是空的，那么这意味着清除按钮已经被单击，而不仅仅是输入字段。

下面是一个使用Vue函数的例子:

HTML

<input
  id="searchBar"
  class="form-input col-span-4"
  type="search"
  placeholder="Search..."
  @click="clearFilter($event)"
/>

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.");
},

2020-11-11 02:59:44

在我的情况下，我不想使用JQuery和我的输入也是通用的，所以在某些情况下，它可以是类型“搜索”，但并不总是这样。我可以让它稍微延迟一点基于这里的另一个答案。基本上，我想在单击输入时打开一个组件，而不是在单击clear按钮时打开。

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

2021-12-29 17:32:18

点击TextField交叉按钮(X) onmousemove()被触发，我们可以使用这个事件来调用任何函数。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>

2016-06-23 12:32:50

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

推荐文章

最新文章

标签