时间戳

首页 > 解决方案 > 选择选项后如何取消突出显示选择元素？

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

问题描述

假设select我的 html 中有一个元素，而eventListenerjavascript 中有一个元素，当我按下键时它console.log是一些文本space

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选择一个选项后，我必须在元素外部单击，以便在按下键console.log时可以输入一些文本space

select有没有办法让我每次想按键时都不必在元素外部单击？

标签： javascripthtml

解决方案

在事件侦听blur()器的选择元素上调用函数。change

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>

推荐阅读