我可以在输入类型=搜索时单击按钮添加事件吗?

Question

是否有任何事件可用于单击清除按钮只出现在html5搜索输入元素?

这是我的尝试。但是，如果我使用"search"，则按回车键也会触发该事件。

。如果我按回车键，控制台打印出来搜索明确

mySearchBar.addEventListener("keydown", (e) => {
if (e.keyCode === ENTER_KEY_CODE) {
console.log("search");
//Display search results
}
});
mySearchBar.addEventListener("search", () => {
console.log("clear");
// Click the cross button of input type=search to Clear the search results and display all
});
};

Answer 1

您可以使用eventListener 'input'来检查每次输入是否为空，然后如果没有值则意味着搜索输入被清除。

编辑:在keydown事件中增加了值测试

mySearchBar = document.getElementById('search');
mySearchBar.addEventListener("keydown", (e) => {
if (e.key === 'Enter') {
if (!e.currentTarget.value)
console.log('cleared');
else
console.log("search");
}
});
mySearchBar.addEventListener('input', (e) => {
if (!e.currentTarget.value)
console.log('cleared');
})

<input type=search id=search>