2

假设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有没有办法让我每次想按键时都不必在元素外部单击？

4

3 回答 3

4

在事件侦听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>

于 2021-05-08T06:38:34.693 回答
3

只需在更改时以编程方式模糊它，this.blur()：

<select id="select" onchange="this.blur()">
  <option value="">test</option>
  <option value="">test</option>
  <option value="">test</option>
</select>

于 2021-05-08T06:41:32.510 回答
2

HTMLElement.blur()

**HTMLElement.blur()** 方法从当前元素移除键盘焦点。

句法：

元素.模糊（）；// 取消对元素的关注

参考：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur

于 2021-05-08T06:41:32.593 回答