JavaScript中无法通过Keypress事件修改小盒子样式问题求助

问题根源 #

1. keypress事件不支持方向键：keypress仅对可打印字符（如字母、数字）生效，方向键属于控制类按键，不会触发该事件，需替换为keydown或keyup事件。
2. div默认无焦点能力：普通<div>无法主动接收键盘事件，必须让它具备焦点属性——要么添加tabindex属性，要么将事件绑定到整个文档上。
3. 语法错误：red未加引号，JavaScript中字符串必须用引号包裹，否则会被视为未定义变量。

修正代码示例 #

调整后的HTML（给盒子添加焦点能力） #

<body>
    <div class="container">
        <div class="main-box" id="main-box">
            <!-- 添加tabindex让div可以被聚焦 -->
            <div class="moving-box" id="moving-box" tabindex="0">
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

修正后的JS（替换事件类型+修复语法） #

const box = document.getElementById("moving-box");

// 用keydown替代keypress事件
box.addEventListener("keydown", function (event) {
    // 推荐使用event.key（符合新标准），比keyCode更直观
    if (event.key === "ArrowUp") {
        box.style.backgroundColor = "red";
    }
});

// 若无需依赖元素焦点，可直接监听全局键盘事件
// document.addEventListener("keydown", function(event) {
//     if (event.key === "ArrowUp") {
//         box.style.backgroundColor = "red";
//     }
// });

额外说明 #

• event.keyCode已被Web标准废弃，优先使用event.key，方向键对应值为ArrowUp、ArrowDown、ArrowLeft、ArrowRight，可读性更强。
• 加了tabindex的盒子，需用户点击它或按Tab键切换焦点后，键盘事件才会生效；绑定到document的话，全局范围内按方向键都会触发，可根据需求选择。

内容的提问来源于stack exchange，提问作者Khushboo Bedi