event key/keyCode已废弃，箭头键移动元素可用什么替代？

keyCode属性已被标准废弃，目前推荐使用**event.key或event.code**来处理箭头键等键盘事件，以下是具体用法：

1. 使用event.key（优先推荐） #

直接匹配按键的功能名称，和用户的输入意图一致，不受键盘布局影响。箭头键对应的取值如下：

• 上箭头：ArrowUp
• 下箭头：ArrowDown
• 左箭头：ArrowLeft
• 右箭头：ArrowRight

示例代码：

document.addEventListener('keydown', (event) => {
  switch(event.key) {
    case 'ArrowUp':
      // 执行元素上移逻辑
      console.log('元素上移');
      event.preventDefault(); // 可选：阻止浏览器默认滚动行为
      break;
    case 'ArrowDown':
      // 执行元素下移逻辑
      console.log('元素下移');
      event.preventDefault();
      break;
    case 'ArrowLeft':
      console.log('元素左移');
      event.preventDefault();
      break;
    case 'ArrowRight':
      console.log('元素右移');
      event.preventDefault();
      break;
  }
});

2. 使用event.code（适合物理按键区分场景） #

匹配的是键盘上的物理按键位置，适合需要区分主键盘箭头和小键盘箭头的场景。常用取值：

• 主键盘上箭头：ArrowUp
• 主键盘下箭头：ArrowDown
• 小键盘上箭头：NumpadUp
• 小键盘下箭头：NumpadDown

示例代码：

document.addEventListener('keydown', (event) => {
  switch(event.code) {
    case 'ArrowUp':
    case 'NumpadUp':
      // 统一处理上移逻辑，或分开处理
      console.log('触发上移操作');
      event.preventDefault();
      break;
    case 'ArrowDown':
    case 'NumpadDown':
      console.log('触发下移操作');
      event.preventDefault();
      break;
  }
});

注意事项 #

• 优先选择event.key，它的语义更清晰，适配多种键盘布局；
• 若需区分物理按键（如主键盘与小键盘箭头），再使用event.code；
• 根据业务需求调用event.preventDefault()，避免浏览器默认滚动行为干扰元素移动逻辑。

内容的提问来源于stack exchange，提问作者Arsen Mkrtumian