是否有可用于输入搜索的重置选项的事件？

在HTML5中有一个新的输入类型'search'。在大多数浏览器上，它只是保留给一个简单的“文本”输入，但对于基于webkit的浏览器，它会添加一些十字来重置输入。是否有可用于输入搜索的重置选项的事件？

我希望能够处理这个问题，是否有这样的事件？

2010-03-22 Boris Guéry

任何有用的评论？ – 2010-03-22 14:18:58

更多答案在这里http://stackoverflow.com/questions/2977023/how-do-you-detect-the-clearing-of-a-search-html5-input/35047611#35047611 – dlsso 2016-01-27 20:56:07

不，这是不可能的。这个UI交互是webkit实现的一些优点，但实际上没有指定。见here。所以，即使可能 - 你不能指望这个UI在Gecko中实现，例如，如果当他们添加type = search的时候。

来源

2010-03-22 15:14:57 miketaylr

这不会是一个问题，我的意思是功能检测，它会添加一个很好的方式来重置输入和派发事件的一些事情。 – 2010-03-22 15:18:00

当然。除了没有检测到的功能外 - 除非您正在Webkit上进行一些浏览器嗅探功能，而检测type = search功能。但是，请记住，您所描述的功能不存在任何事件，因此它是一个毫无意义的问题。 – miketaylr 2010-03-22 15:55:22

我不知道这是正确的答案，但当用户使用X按钮清除输入时，会调用click事件处理程序。

$('input[type="search"]').click(function(event) { 
    // This code runs anytime a user clicks on the input, 
    // including when they clear it using the X button. 
})

来源

2010-07-24 01:40:25 jpwatts

问题是我们没有办法知道用户是否实际上点击十字来清理他的输入或编辑它。 – 2010-08-01 20:07:50

我同意鲍里斯。另外，请注意：当IE 10点击新的X按钮时，IE 10似乎不会触发“点击”事件 - 只是鼠标悬停和鼠标移动。即使在mouseup被触发后，该值仍然没有被更改为空。 – 2013-09-06 01:14:52

看来miketaylr是正确的，它不可能赶上这个事件。请参阅此问题的答案：How do you detect the clearing of a "search" HTML5 input?

为了符合标准并且不依赖于一个布局引擎的一个功能，我建议您在onChange事件中运行您的代码（如果新文本值为空）。

来源

2010-08-31 08:28:45 n0nick

更改事件仅在文本输入失去焦点后触发：如果您正在逐步更新任何内容，用户将希望在单击X按钮后立即更新它，而不是等到焦点丢失。 – 2013-09-06 01:18:22

本页面：http://css-tricks.com/webkit-html5-search-inputs/从才算是Ajax提到评论：

也有一些自定义的事件来说 - 比如“搜索”的时候触发当用户暂停输入（设定“增量”为true）。

当测试时，我发现这个'搜索'事件也被调用，当输入被清除（至少在最新版本的Safari）。

来源

2012-03-13 18:49:20

谢谢，这工作！ :-) – Neal 2012-10-18 17:08:35

单击“MS Edge”中的“x”时，只会触发“输入”事件。 – Mottie 2016-01-15 03:56:29

您可以添加一个条件来检查搜索字段的内容是否为空，但即使发生超时也不行，因为它先运行代码，然后清除该框。另一个问题是，当您编辑字段时，代码不会对关闭按钮做出反应

来源

2013-07-25 15:47:44

您也可以侦听“输入”事件，这比“搜索”事件更通用，但仍能捕获重置选项。

来源

2013-08-02 17:17:58

-1

试试这个，希望帮助您

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

来源

2015-12-23 04:49:15

我不知道，如果仍然有人正在寻找一个解决方案。但是下面的代码片段/技巧为我工作。 CSS完成隐藏明确（X）图标，如果你不想隐藏明确（X）图标但是需要处理那么JS代码片段会有所帮助。

CSS技巧：

#textFieldId::-ms-clear {display: none;} - 对于一个特定的文本字段

或

input[type=text]::-ms-clear { display: none; } - 在范围内的所有文本字段

JavaScript技巧（将文本字段值重置为空/空白并触发html事件KeyUp。因此，你可以根据你的需要改变）

$('#textFieldId').bind("mouseup", function() { 
     var $input = $(this); 
     var oldValue = $input.val(); 
     if (oldValue == "") { 
      return; 
     } 
     setTimeout(function() { 
      var newValue = $input.val(); 
      if (newValue == "") { 
       $input.trigger("keyup"); 
      } 
     }, 1); 
    });

来源

2016-10-10 13:21:09

是否有可用于输入搜索的重置选项的事件？

回答

相关问题