Question

在HTML5中有一种新的输入类型“搜索”。在大多数浏览器上，它仅仅是一个简单的“文本”输入，但对于基于webkit的浏览器，它会添加一点交叉来重置输入。

我希望能够处理这个，是否有事件发生？

Answer 1

此页面：http://css-tricks.com/webkit-html5-search-inputs/提到了Ajaxian的评论：

也有一些自定义事件 - 例如“搜索”会触发当用户暂停键入时（将'incremental'设置为true）。

测试时，我发现在清除输入时也会调用此“搜索”事件（至少在最新版本的Safari中）。

Answer 2

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

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

Answer 3

不，这是不可能的。这种UI交互是webkit实现的一些优点，但实际上并未进行规范。见here。所以，即使有可能 - 你也不能指望这个UI在Gecko中实现，例如，当他们添加type = search时。

Answer 4

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

Answer 5

我不确定，是否有人正在寻找解决方案。但是下面的代码片段/技巧对我有用。要完成的CSS会隐藏 清除（X）图标 ，如果您不想隐藏 clear（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);
    });

Answer 6

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

Answer 7

我想您想在单击十字按钮时捕获事件这是我发现我似乎工作正常的一种解决方案（没有setTimeout（））

$('id').bind('input propertychange', function() {
if (this.value == ""){
    doStuff()
    $input.trigger("cleared");
}});

希望这会有所帮助！

Answer 8

在我使用MS Edge进行的测试中，没有触发这些事件的任何。我尝试了输入，更改，单击和搜索，但是当您单击X时它们并未被触发。我什至尝试直接设置input.onchange，input.onclick等-仍然没有。

似乎唯一引发的事件是mousedown和mouseup，但是尚未清除输入的值，因此在检测到事件后我不得不使用setTimeout。

Answer 9

试试这个希望帮助你

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

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

10 个答案: