在HTML5中,搜索输入类型的右边会出现一个小X,这将清除文本框(至少在Chrome中,可能在其他浏览器中)。是否有一种方法来检测这个X在Javascript或jQuery中被点击,而不是检测盒子被点击或做一些位置点击检测(X -position/y-position)?
当前回答
const inputElement = document.getElementById("input");
let inputValue;
let isSearchCleared = false;
inputElement.addEventListener("input", function (event) {
if (!event.target.value && inputValue) {
//Search is cleared
isSearchCleared = true;
} else {
isSearchCleared = false;
}
inputValue = event.target.value;
});
其他回答
基于js的事件循环,点击clear按钮将在输入时触发搜索事件,因此下面的代码将正常工作:
input.onclick = function(e){
this._cleared = true
setTimeout(()=>{
this._cleared = false
})
}
input.onsearch = function(e){
if(this._cleared) {
console.log('clear button clicked!')
}
}
上面的代码,点击事件预约了这个。_cleared = false事件循环,但该事件将始终在onsearch事件之后运行,因此您可以稳定地检查this。_cleared状态,以确定用户是否刚刚点击X按钮,然后触发onsearch事件。
这可以在几乎所有的条件下工作,粘贴文本,具有增量属性,ENTER/ESC键按下等。
至少在Chrome中,搜索输入的“X”按钮似乎发出了一种不同的事件。
MDN上还声明可以触发InputEvent或Event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
下面的测试。您将看到文本输入将是一个InputEvent,带有包含输入字符的“data”属性,单击X按钮将发出一个Event类型。
document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))
因此,应能区分使用:
if (ev instanceof InputEvent) { ... }
这里有一种方法。你需要添加增量属性到你的html或它不会工作。
window.onload = function() { var tf = document.getElementById('textField'); var button = document.getElementById('b'); 按钮禁用 = 真; var onKeyChange = 函数 textChange() { 按钮禁用 = (tf.value === “”) ?真 : 假; } tf.addEventListener('keyup', onKeyChange); tf.addEventListener('search', onKeyChange); } <输入 id=“文本字段” 类型=“搜索” 占位符=“搜索” 增量=“增量”> <按钮 id=“b”>去!</button>
我知道这是一个老问题,但我一直在寻找类似的东西。确定点击“X”以清除搜索框的时间。这里没有一个答案对我有帮助。其中一个很接近,但也受到影响,当用户点击“enter”按钮时,它会触发与点击“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);
});
在我的情况下,我不想使用JQuery和我的输入也是通用的,所以在某些情况下,它可以是类型“搜索”,但并不总是这样。我可以让它稍微延迟一点基于这里的另一个答案。基本上,我想在单击输入时打开一个组件,而不是在单击clear按钮时打开。
function onClick(e: React.MouseEvent<HTMLInputElement>) {
const target = e.currentTarget;
const oldValue = target.value;
setTimeout(() => {
const newValue = target.value;
if (oldValue && !newValue) {
// Clear was clicked so do something here on clear
return;
}
// Was a regular click so do something here
}, 50);
};
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求