Jas*_*son 135 javascript jquery events html5 javascript-events
在HTML5中,search输入类型在右侧显示一个小X,将清除文本框(至少在Chrome中,可能是其他文件框).有没有办法检测这个X在javascript或jQuery中被点击的时间,比如检测到什么时候单击该框或进行某种位置点击检测(x-position/y-position)？
Pau*_*uan 91
实际上,只要用户搜索或用户点击"x",就会触发"搜索"事件.这特别有用,因为它理解"增量"属性.
现在,话虽如此,我不确定你是否可以区分单击"x"和搜索,除非你使用"onclick"黑客.无论哪种方式,希望这会有所帮助.
参考文献:
小智 49
绑定 - search发送搜索框,如下所示 -
$('input[type=search]').on('search', function () {
// search logic here
// this function will be executed on click of X (clear button)
});
Lor*_*tté 42
我想添加一个"迟到"的答案,因为我挣扎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的反应不同.特别是,Firefox将其change视为"对输入的每次更改",而Chrome则将其视为"焦点丢失且内容更改".因此,在Chrome上,"更新面板"功能被调用一次,在每次击键时在FF两次(一次进入keyup,一次进入change)
此外,使用小X(在FF下不存在)清除字段会search在Chrome 下触发事件:不keyup,不change.
结论？input改为使用:
$(some-input).on("input", function() {
// update panel
}
它在我测试的所有浏览器下都具有相同的行为,在输入内容的每次更改时都会做出反应(使用鼠标复制粘贴,自动完成和包含"X").
ggu*_*erg 14
使用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>
max*_*uty 12
哇，对于一个非常简单的问题，这里有一些非常复杂的答案。
只需'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
})`
我知道这是一个老问题，但我一直在寻找类似的东西。确定何时单击“X”以清除搜索框。这里的任何答案都没有帮助我。一个是关闭的，但当用户点击“输入”按钮时也会受到影响，它会触发与点击“X”相同的结果。
我在另一篇文章中找到了这个答案，它非常适合我，并且仅在用户清除搜索框时触发。
$("input").bind("mouseup", function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue == ""){
// capture the clear
$input.trigger("cleared");
}
}, 1);
});
对我来说,点击X应该算作一个改变事件是有道理的.我已经将onChange事件设置为完成我需要它做的事情.所以对我来说,修复就是简单地执行这个jQuery行:
$('#search').click(function(){ $(this).change(); });