在HTML5中,search
输入类型在右侧带有一个小X,这将清除文本框(至少在Chrome中是这样,在其他浏览器中也是如此)。有没有一种方法可以检测到这个X在Javascript或jQuery中被点击,而不是,比如说,检测这个框被点击的时间,或者做一些位置点击检测(x-position/y-position)?
发布于 2010-09-16 20:41:55
实际上,每当用户搜索或单击"x“时,都会触发一个"search”事件。这特别有用,因为它理解“增量”属性。
现在,已经说过了,我不确定你是否能区分点击"x“和搜索,除非你使用"onclick”hack。无论哪种方式,希望这对你有所帮助。
发布于 2013-02-27 18:18:14
Bind search
-event the search box,如下所示-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
发布于 2014-08-29 22:00:07
我想加上一个“迟到”的答案,因为我今天在change
,keyup
和search
上挣扎,也许我最后发现的可能对其他人也有用。基本上,我有一个搜索类型的面板,我只是想对按下的小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的反应是不同的。特别是,火狐将change
视为“输入的每一处变化”,而Chrome则将其视为“当焦点丢失且内容发生变化时”。因此,在Chrome上,“更新面板”函数被调用一次,在FF上,每次按键调用两次(一个在keyup
中,一个在change
中)。
此外,清除带有小X的字段(不在FF下)会在Chrome: no keyup
,no change
下触发search
事件。
结论是什么?请改用input
:
$(some-input).on("input", function() {
// update panel
}
它在我测试过的所有浏览器上都有相同的行为,对输入内容的每一个变化都会做出反应(用鼠标复制-粘贴,自动补全和"X“)。
https://stackoverflow.com/questions/2977023
复制相似问题