我想创建一个网页,使用户能够使用键盘上的指定键点亮页面上的框/项目。例如,在下面,使用“M”点亮界面上的中间项目 - 或“F”点亮顶部项目。我希望功能能够在按下多个按钮的同时点亮多个盒子。
我被建议使用事件装饰器,但我不完全确定从哪里开始。
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
alert('Left was pressed');
}
else if(event.keyCode == 39) {
alert('Right was pressed');
}
});
只需检查特定的字母键,然后根据这些键执行操作:
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>