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

Question

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

这是我的尝试。但是如果我使用“搜索”，事件也会通过按回车触发。

即如果我按回车，控制台打印出搜索清除

  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
  });
};

标签： javascript

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>