JavaScript实现计算器时keydown事件无法捕获特殊按键问题求助

算力阿峰

2026-9-30

问题解决方案

问题根因

你使用的event.keyCode是已废弃的非标准属性，不同浏览器对/、.、+、-这类符号按键的keyCode映射规则没有统一规范，导致跨浏览器表现不一致
部分符号按键会触发浏览器默认快捷键（比如Chrome下按/默认会聚焦到地址栏搜索框），事件被浏览器优先拦截消费，没有触发你的自定义逻辑

修复方案

第一步：修改按钮的自定义属性

把原来按钮上存keyCode的data-key，改为存储按键对应的实际字符，示例：

<button class="num-key" data-key=".">.</button>
<button data-key="/">÷</button>
<button data-key="+">+</button>
<button data-key="-">-</button>
<button data-key="=">=</button>

第二步：重构keyPress函数

使用标准的event.key属性替代废弃的keyCode，同时匹配到目标按键后阻止浏览器默认行为：

function keyPress(event){
    // 可选优化：避免用户在输入框输入时触发计算器逻辑
    if (["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) {
        return;
    }
    // 取标准属性返回的按键字符
    let currentKey = event.key;
    // 兼容回车触发等于的逻辑
    if(currentKey === "Enter"){
        currentKey = "=";
    }
    let btnPressed = document.querySelector(`button[data-key="${currentKey}"]`);
    if(!btnPressed){
        return;
    }
    // 匹配到计算器支持的按键后，阻止浏览器默认行为
    event.preventDefault();
    btnPressed.click(); 
}