使用JavaScript开发的计算器如何绑定键盘按键触发对应功能

核心逻辑是复用你已经写好的按钮点击逻辑，只需要加一层键盘事件监听即可，不需要重复开发功能代码： #

实现步骤 #

1. 给按钮添加匹配标识
   给每个计算器按钮新增data-key自定义属性，属性值和对应键盘按键的key值保持一致，示例代码如下：

<!-- 数字按键 -->
<button class="calc-btn" data-key="0">0</button>
<button class="calc-btn" data-key="1">1</button>
<!-- 以此类推其他数字 -->

<!-- 运算符按键 -->
<button class="calc-btn" data-key="+">+</button>
<button class="calc-btn" data-key="-">-</button>
<button class="calc-btn" data-key="*">×</button>
<button class="calc-btn" data-key="/">÷</button>

<!-- 功能按键 -->
<button class="calc-btn" data-key="Enter">=</button>
<button class="calc-btn" data-key="Backspace">删除</button>
<button class="calc-btn" data-key="Escape">清空</button>

2. 添加全局键盘事件监听
   在JS代码中新增keydown事件监听，匹配到对应按键后直接触发按钮的点击事件，复用原有逻辑：

document.addEventListener('keydown', (e) => {
  // 可选：如果页面有其他输入框，聚焦时不触发计算器按键逻辑
  if (e.target.tagName.toLowerCase() === 'input') return

  // 匹配对应按键的按钮
  const matchBtn = document.querySelector(`.calc-btn[data-key="${e.key}"]`)
  if (!matchBtn) return

  // 触发按钮原有点击事件
  matchBtn.click()

  // 可选：添加按键按压动效，提升交互反馈
  matchBtn.classList.add('press')
  setTimeout(() => matchBtn.classList.remove('press'), 120)
})

补充说明 #

• 特殊按键的key值可以直接在事件回调里打印e.key确认，比如小键盘的回车和主键盘回车的key值都是Enter，小键盘数字和主键盘数字的key值完全一致，不需要额外适配。
• 如果需要区分主键盘和小键盘按键，可以用e.code属性代替e.key做匹配。

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