javascript - 选择选项后如何取消突出显示选择元素？

Question

假设我的 html 中有一个 select 元素，javascript 中有一个 eventListener，当我按下空格键

document.addEventListener("keyup", myFunc);

function myFunc(event){
      if (event.code === 'Space') {
        console.log("hi");
      }
}

<select id="select">
  <option value="">test</option>
  <option value="">test</option>
  <option value="">test</option>
</select>

当我单击其中一个选项时，select 元素会自动关闭，但它仍然突出显示。因此，如果我按下空格键，它会打开 select 元素，而不是执行 console.log 函数

选择一个选项后，我必须在 select 元素外部单击，这样当我按下 space 时，我可以 console.log 一些文本 key

有没有一种方法可以让我不必每次都在 select 元素之外单击该键？

Answer 1

在 change 事件监听器中对选择元素调用 blur() 函数。

document.addEventListener("keyup", myFunc);
const selectEle = document.getElementById("select");

function myFunc(event){
      if (event.code === 'Space') {
        console.log("hi");
      }
}

selectEle.addEventListener("change", (e) => {
  selectEle.blur();
});

<select id="select">
  <option value="">test</option>
  <option value="">test</option>
  <option value="">test</option>
</select>