JavaScript计算器键盘输入触发屏幕显示空白问题排查

你碰到的三个异常现象，根源是两个耦合的逻辑漏洞：

• 鼠标点击按钮后焦点残留：浏览器默认会给被点击的按钮加上焦点，此时按回车会自动触发焦点按钮的原生点击事件。你写的回车逻辑是手动触发等号按钮点击，两个点击事件先后执行会直接打乱计算器状态：如果焦点刚好落在AC按钮上，回车会先触发清空再触发计算，表现就是显示屏直接空白；你必须点一下计算器外区域，本质是把焦点从按钮上移走，才不会触发这个默认行为。
• 计算方法逻辑错误+键盘事件未做拦截：compute()方法里输入不合法时返回了无意义的1，没有正确终止逻辑；键盘事件没有阻止默认行为，浏览器自带的快捷键（比如/键触发快速查找、回车触发表单提交/焦点按钮点击）会干扰执行，导致鼠标和键盘操作切换时状态断连。

1. 修正compute方法的错误返回 #

把方法里不合法判断的return 1改成直接return，输入不满足计算条件时直接终止执行，不要透传无效值：

compute() {
    let computation
    const prev = parseFloat(this.previousOperand)
    const current = parseFloat(this.currentOperand)
    if(isNaN(prev) || isNaN(current)) return // 移除原代码里return后的1
    switch(this.operation) {
        case '+':
            computation = prev + current
            break
        case '-':
            computation = prev - current
            break
        case '*':
            computation = prev * current
            break
        case '÷':
            computation = prev / current
            break
        default:
            return
    }
    this.currentOperand = computation
    this.operation = undefined
    this.previousOperand = ''
}

2. 解决按钮焦点残留问题 #

给所有按钮的点击回调末尾加blur()，点击后主动移除按钮焦点，避免回车误触：

numberButtons.forEach(button => {
    button.addEventListener('click', () =>{
        calculator.appendNumber(button.innerText)
        calculator.updateDisplay()
        button.blur()
    })
})

operationButtons.forEach(button => {
    button.addEventListener('click', () =>{
        calculator.chooseOperation(button.innerText)
        calculator.updateDisplay()
        button.blur()
    })
})

equalsButton.addEventListener('click', () => {
    calculator.compute()
    calculator.updateDisplay()
    equalsButton.blur()
})

allClearButton.addEventListener('click', () => {
    calculator.clear()
    calculator.updateDisplay()
    allClearButton.blur()
})

deleteButton.addEventListener('click', () => {
    calculator.delete()
    calculator.updateDisplay()
    deleteButton.blur()
})

3. 重构键盘事件逻辑 #

把原来绑定在document.onkeyup的事件改成keydown监听，加默认行为阻止，直接调用计算器实例方法，不要模拟DOM按钮点击（避免焦点带来的连锁触发），同时简化冗余的条件判断：

document.addEventListener('keydown', e => {
    // 拦截对应按键的浏览器默认行为，避免干扰
    const validKeys = ["1","2","3","4","5","6","7","8","9","0",".","+","-","*","/","Enter","Backspace","Escape"]
    if(validKeys.includes(e.key)) e.preventDefault()

    // 数字和小数点输入
    if((e.key >= '0' && e.key <= '9') || e.key === '.') {
        calculator.appendNumber(e.key)
        calculator.updateDisplay()
    }
    // 运算符输入
    else if(["+","-","*","/"].includes(e.key)) {
        const op = e.key === "/" ? "÷" : e.key
        calculator.chooseOperation(op)
        calculator.updateDisplay()
    }
    // 回车计算
    else if(e.key === "Enter") {
        calculator.compute()
        calculator.updateDisplay()
    }
    // 退格删除
    else if(e.key === "Backspace") {
        calculator.delete()
        calculator.updateDisplay()
    }
    // 新增ESC快捷键清空，和AC功能对齐
    else if(e.key === "Escape") {
        calculator.clear()
        calculator.updateDisplay()
    }
})

改完之后所有鼠标、键盘切换操作的异常都会消失，不需要额外点击页面空白区域切换焦点，回车也不会再误触发清空。

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