Javascript - 使用户能够使用键盘上的指定键点亮页面上的框/项目

问题描述 投票:-1回答:1

我想创建一个网页,使用户能够使用键盘上的指定键点亮页面上的框/项目。例如,在下面,使用“M”点亮界面上的中间项目 - 或“F”点亮顶部项目。我希望功能能够在按下多个按钮的同时点亮多个盒子。

我被建议使用事件装饰器,但我不完全确定从哪里开始。

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) {
        alert('Left was pressed');
    }
    else if(event.keyCode == 39) {
        alert('Right was pressed');
    }
});
javascript html css
1个回答
0
投票

只需检查特定的字母键,然后根据这些键执行操作:

document.addEventListener("keydown", ({ keyCode }) => {
  if (document.getElementById(keyCode)) document.getElementById(keyCode).classList.add("active");
});
document.addEventListener("keyup", () => {
  document.querySelectorAll(".key").forEach(elem => elem.classList.remove("active"));
});
.active {
  background-color: gold;
}
<div id="77" class="key">M</div>
<div id="70" class="key">F</div>
<div id="76" class="key">L</div>
© www.soinside.com 2019 - 2024. All rights reserved.