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

Javascript 输入搜索的重置选项是否有可用的事件?,javascript,jquery,html,dom-events,Javascript,Jquery,Html,Dom Events,在HTML5中,有一种新的输入类型“搜索”。 在大多数浏览器上,它只是停留在一个简单的“文本”输入上,但对于基于webkit的浏览器,它添加了一个小十字来重置输入 我希望能够处理此问题,是否有相关事件?不,不可能。这种UI交互是webkit实现的一些优点,但实际上并没有具体说明。看见因此,即使这是可能的——例如,当Gecko添加type=search时,您也不能期望该UI在Gecko中实现。我不知道这是否是正确答案,但当用户使用X按钮清除输入时,会调用单击事件处理程序 $('input[type

在HTML5中,有一种新的输入类型“搜索”。 在大多数浏览器上,它只是停留在一个简单的“文本”输入上,但对于基于webkit的浏览器,它添加了一个小十字来重置输入


我希望能够处理此问题,是否有相关事件?

不,不可能。这种UI交互是webkit实现的一些优点,但实际上并没有具体说明。看见因此,即使这是可能的——例如,当Gecko添加type=search时,您也不能期望该UI在Gecko中实现。

我不知道这是否是正确答案,但当用户使用X按钮清除输入时,会调用
单击事件处理程序

$('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.
})

看来miketaylr是对的,不可能赶上这次事件。请参见此问题的答案:

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

此页面:提到Ajaxian的一条评论:

还有一些自定义事件,例如触发的“搜索” 当用户暂停键入时(将“增量”设置为true)


在测试时,我发现在清除输入时也会调用此“搜索”事件(至少在最新版本的Safari中是这样)。

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

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

尝试此方法,希望对您有所帮助

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

我不确定是否还有人在寻找解决方案。然而,下面的代码片段/技巧对我很有用。CSS完成隐藏清除(X)图标,如果您不想隐藏清除(X)图标,但需要处理,那么JS代码片段会有所帮助

CSS技巧:

#textFieldId::-ms clear{display:none;}
--用于特定文本字段

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

JavaScript技巧(将文本字段值重置为空/空并启动html事件键控。相应地,您可以根据需要进行更改)


我想你想在点击交叉按钮时捕捉事件 我发现有一个解决方案工作正常(没有setTimeout())


希望这有帮助

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


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

这不会是问题,我的意思是,通过功能检测,它只会添加一种很好的方法来重置输入并在事件上发送一些内容。当然。除了没有要检测的功能——除非您在feature detecting type=search的基础上对Webkit进行浏览器嗅探。但是,请记住,您所描述的功能没有任何事件,因此这是一个没有实际意义的问题。问题是我们无法知道用户是否真的在点击十字以清除其输入或编辑它。我同意Boris的观点。另外,要注意:IE 10在新的X按钮被点击时,似乎不会触发“点击”事件——只需按下鼠标和按下鼠标。即使在启动mouseup之后,该值仍然没有更改为空。更改事件仅在文本输入失去焦点后触发:如果您正在增量更新任何内容,用户将期望它在单击X按钮后立即更新,而不是等待焦点丢失。仅“输入”单击MS Edge中的“x”时触发事件。更多答案请参见此处
$('#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);
    });
$('id').bind('input propertychange', function() {
if (this.value == ""){
    doStuff()
    $input.trigger("cleared");
}});