在HTML5中,搜索输入类型的右边会出现一个小X,这将清除文本框(至少在Chrome中,可能在其他浏览器中)。是否有一种方法来检测这个X在Javascript或jQuery中被点击,而不是检测盒子被点击或做一些位置点击检测(X -position/y-position)?
当前回答
将搜索事件绑定到搜索框,如下所示-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
其他回答
document.querySelectorAll('input[type=search]').forEach(function (input) {
input.addEventListener('mouseup', function (e) {
if (input.value.length > 0) {
setTimeout(function () {
if (input.value.length === 0) {
//do reset action here
}
}, 5);
}
});
}
ECMASCRIPT 2016
试试这个,希望能帮到你
$("input[name=search-mini]").on("search", function() {
//do something for search
});
我想补充一个“晚”的答案,因为我今天在改变、keyup和搜索方面很挣扎,也许我最后发现的东西对其他人也有用。 基本上,我有一个搜索类型面板,我只是想对小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的反应是不同的。 特别是,Firefox将更改视为“对输入的每一次更改”,而Chrome则将其视为“当焦点丢失和内容更改时”。 因此,在Chrome上的“更新面板”函数被调用一次,在FF上的每一次击键都被调用两次(一次在keyup,一次在change)
此外,用小X清除字段(在FF下不存在)在Chrome下触发搜索事件:没有keyup,没有变化。
结论?使用input代替:
$(some-input).on("input", function() {
// update panel
}
在我测试的所有浏览器中,它都具有相同的行为,对输入内容的每一次更改都做出反应(包括使用鼠标复制粘贴、自动补全和“X”)。
你似乎不能在浏览器中访问它。搜索输入是Cocoa NSSearchField的Webkit HTML包装器。取消按钮似乎包含在浏览器客户机代码中,而包装器中没有可用的外部引用。
来源:
http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890 http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state http://dev.w3.org/html5/markup/input.search.html#input.search
看起来你必须通过点击鼠标位置来解决这个问题,比如:
$('input[type=search]').bind('click', function(e) {
var $earch = $(this);
var offset = $earch.offset();
if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
// your code here
}
});
你也可以用一般的方式通过绑定onInput事件处理如下
<input type="search" oninput="myFunction()">
推荐文章
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法
- 如何在页面上遍历所有DOM元素?