时间戳

首页 > 解决方案 > Javascript - 使用户能够使用键盘上的指定键点亮页面上的框/项目

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

问题描述

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

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

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) {
        alert('Left was pressed');
    }
    else if(event.keyCode == 39) {
        alert('Right was pressed');
    }
});

标签： javascripthtmlcss

解决方案

只需检查特定的字母键，并根据这些键执行操作：

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>

推荐阅读