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


当前回答

试试这个,希望能帮到你

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

其他回答

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

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

我还不如把我的5c也加进去。

keyup事件不检测鼠标单击X以清除字段,但输入事件检测击键和鼠标单击。您可以通过检查事件的originalEvent属性来区分触发输入事件的事件—它们之间有相当多的区别。

我发现最简单的方法如下:

jQuery("#searchinput").on("input",function(event) {
      var isclick = event.originalEvent.inputType == undefined;
   }   

通过击键,event.originalEvent.inputType = "insertText"。

我使用Chrome -没有在其他浏览器中测试,但鉴于事件对象是相当普遍的,我猜这将在大多数情况下工作。

注意,仅仅单击输入不会触发事件。

2022简单,易读,简短的解决方案

哇,这么简单的问题居然有这么复杂的答案。

只需在你的搜索输入中添加一个“输入”监听器,当用户在输入中键入某些内容或单击清除图标时,它就会捕捉到。

document.getElementById('searchInput').addEventListener('input', (e) => { console.log('Input value: “${e.currentTarget.value}”'); }) <输入 id=“搜索输入” 类型=“搜索” 占位符=“搜索” />

如果你不能使用ES6+,那么下面是转换后的代码:

document.getElementById('searchInput').addEventListener('input', function(e) { 
  // Yay! You make it in here when a user types or clicks the clear icon
})` 

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

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

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

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

多托罗网络参考