在 HTML5 中，search输入类型会在右侧显示一个小 X 以清除文本框（至少在 Chrome 中，也许其他人中如此）。有没有办法检测何时在 Javascript 或 jQuery 中单击此 X，而不是检测何时单击框或进行某种位置单击检测（x 位置/y 位置）？
您如何检测“搜索”HTML5 输入的清除？
IT技术
javascript
jquery
html
events
dom-events
2021-03-15 09:51:33
6个回答
实际上，每当用户搜索或用户单击“x”时都会触发“搜索”事件。这特别有用，因为它理解“增量”属性。
现在，话虽如此，我不确定您是否能分辨出单击“x”和搜索之间的区别，除非您使用“onclick”技巧。无论哪种方式，希望这会有所帮助。
绑定-search事件搜索框，如下所示-
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
我想添加一个“迟到”的答案，因为我挣扎change，keyup和search今天，也许是我最后发现可能对他人有用的。基本上，我有一个搜索类型面板，我只是想对小 X 的按下做出正确的react（在 Chrome 和 Opera 下，FF 没有实现它），并因此清除内容窗格。
我有这个代码：
$(some-input).keyup(function() {
// update panel
});
$(some-input).change(function() {
// update panel
});
$(some-input).on("search", function() {
// update panel
});
（它们是分开的，因为我想检查每个调用的时间和情况）。
事实证明，Chrome 和 Firefox 的react不同。特别是，Firefox 将其change视为“对输入的每次更改”，而 Chrome 将其视为“当焦点丢失且内容更改时”。因此，在 Chrome 上，“更新面板”功能被调用一次，每次击键时在 FF 上调用两次（一个 in keyup，一个 in change）
此外，使用小 X 清除字段（FF 下不存在）会search在 Chrome下触发事件： no keyup, no change。
结论？使用input来代替：
$(some-input).on("input", function() {
// update panel
}
它在我测试过的所有浏览器下以相同的行为工作，对输入内容的每次更改做出react（使用鼠标复制粘贴、自动完成和“X”）。
使用 Pauan 的回应，这几乎是可能的。前任。
<head>
<script type="text/javascript">
function OnSearch(input) {
if(input.value == "") {
alert("You either clicked the X or you searched for nothing.");
}
else {
alert("You searched for " + input.value);
}
}
</script>
</head>
<body>
Please specify the text you want to find and press ENTER!
<input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
简单易读且简短的解决方案
哇，对于一个非常简单的问题，这里有一些非常复杂的答案。
只需'input'在您的搜索输入上添加一个侦听器，当用户在输入中键入内容或单击清除图标时，它将捕获该侦听器。
document.getElementById('searchInput').addEventListener('input', (e) => {
console.log(`Input value: "${e.currentTarget.value}"`);
})<input id="searchInput" type="search" placeholder="Search" />如果您不能使用 ES6+，那么这里是为您转换的代码：
document.getElementById('searchInput').addEventListener('input', function(e) {
// Yay! You make it in here when a user types or clicks the clear icon
})`
其它你可能感兴趣的问题