HTML计算器按钮如何同时实现点击与键盘按键触发输入功能？

这个问题我之前做简易计算器时也碰到过，核心原因很明确：你把键盘事件绑定在了按钮元素上——只有当按钮获得焦点（比如你点击过它）的时候，这个onkeypress事件才会被触发。直接按键盘时，按钮根本没拿到焦点，自然不会有任何反应。

给你两个实用的修改方案，既能保留点击按钮的功能，又能实现直接按键盘输入的需求：

方案一：全局监听键盘事件（推荐） #

把键盘事件绑定到整个文档上，这样不管页面焦点在哪里，按下键盘都能触发对应的操作。同时封装一个共用函数来处理输入逻辑，避免代码重复，后续扩展其他数字/操作符也更方便：

修改后的HTML代码 #

<!-- 按钮部分：移除onkeypress，调用统一的添加函数 -->
<td><input type="button" class="button" name="one" value="1" onclick="addToDisplay('1')"></td>

<!-- 显示框保持原有结构即可 -->
<input type="text" name="display" id="display" disabled>

添加JavaScript逻辑 #

在页面的<script>标签里加入这段代码：

// 封装添加字符到显示框的函数，点击按钮和键盘输入共用同一逻辑
function addToDisplay(char) {
  document.getElementById('display').value += char;
}

// 给整个文档绑定键盘按下事件
document.addEventListener('keydown', function(event) {
  // 兼容key和keyCode两种判断方式，适配不同浏览器
  if (event.key === '1' || event.keyCode === 49) {
    addToDisplay('1');
    // 阻止默认行为，避免输入到页面其他可输入元素中
    event.preventDefault();
  }
});

方案二：让显示框自动获得焦点（快速临时方案） #

如果你不想改太多代码，可以让显示框默认获得焦点，通过显示框来捕获键盘事件。不过注意：disabled状态的元素无法获得焦点，需要先改成readonly：

修改显示框代码 #

<input type="text" name="display" id="display" readonly>

添加自动聚焦与事件监听脚本 #

// 页面加载完成后，自动让显示框获得焦点
window.onload = function() {
  document.getElementById('display').focus();
};

// 给显示框绑定键盘事件
document.getElementById('display').addEventListener('keydown', function(event) {
  if (event.key === '1' || event.keyCode === 49) {
    this.value += '1';
    event.preventDefault();
  }
});

不过方案二更局限——如果用户点击页面其他地方，焦点会丢失，键盘输入又会失效，还是方案一的全局监听更稳定可靠。

另外小提醒：尽量少用内联事件（比如直接在HTML里写onclick），后续维护起来会比较麻烦，最好把所有事件监听都放在JavaScript代码里，不过简易计算器的场景下，内联写法也完全够用~

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