如何实现仅在指定div（zoomPanCont）内按退格/删除键时弹出Alert？

要实现仅当光标位于zoomPanCont灰色盒子内时，按下Backspace或Delete键才弹出Alert，核心问题是普通div默认无法获得焦点，所以需要先让它具备可聚焦能力，再绑定按键事件。

关键步骤 #

• 给目标div添加tabindex属性，使其可以被光标聚焦
• 正确获取元素并绑定按键监听事件

完整代码示例 #

<!-- 给灰色盒子添加tabindex属性，使其可聚焦 -->
<div id="zoomPanCont" tabindex="0" style="width: 300px; height: 200px; background: #eee; padding: 10px;">
  点击这个灰色盒子，按下Backspace或Delete键测试弹窗
</div>

<script>
// 获取目标div元素
const zoomPanCont = document.getElementById('zoomPanCont');

// 绑定keydown事件监听
zoomPanCont.addEventListener('keydown', function(event) {
  // 使用event.key替代已废弃的keyCode，兼容性更好
  if (event.key === 'Backspace') {
    alert('你按下了Backspace键');
    // 若需阻止浏览器默认行为（比如页面后退），可取消下面注释
    // event.preventDefault();
  } else if (event.key === 'Delete') {
    alert('你按下了Delete键');
    // event.preventDefault();
  }
});
</script>

核心说明 #

1. tabindex="0"：让div具备可聚焦能力，点击盒子或按Tab键都能让它获得光标焦点，此时按键事件才会触发。
2. 事件绑定方式：用addEventListener替代直接赋值onkeydown，避免覆盖其他可能存在的事件监听。
3. 按键判断：使用event.key取代已废弃的keyCode，语义更清晰，兼容性更强。

内容的提问来源于stack exchange，提问作者Jimmy Brown