JavaScript计算器键盘事件失效及退格键功能异常问题

1. 键盘事件仅点击计算器后才触发的问题 #

原因 #

.calc-buttons是<section>元素，默认不具备可聚焦特性，页面加载后无法捕获键盘事件，只有点击该元素使其获得焦点后，键盘事件才会生效。

修复方案 #

• 给.calc-buttons添加tabindex="0"，使其成为可聚焦元素；
• 在初始化时自动聚焦到计算器容器，无需手动点击。

修改后的HTML片段：

<section class="calc-buttons" tabindex="0">

修改后的init函数：

function init(){
    const calcButtons = document.querySelector('.calc-buttons');
    calcButtons.focus();
    calcButtons.addEventListener('keydown', function (event) {
        console.log(event);
        // 可选：添加键盘输入映射逻辑
        handleKeydown(event);
    })
    calcButtons.addEventListener('click', function (event) {
        inputKeys(event.target.innerText);
    })
}

2. 退格键（←）功能失效的问题 #

原因 #

handleSymbol的case '←'分支中，错误使用了buffer.toString(0, buffer.length - 1)。字符串的toString()方法不支持截取参数，无法实现字符串截断，导致退格功能无效。

修复方案 #

使用字符串的slice()方法截取前length-1位字符：

修改后的handleSymbol对应分支：

case '←':
    if(buffer.length === 1)
        buffer = '0';
    else
        buffer = buffer.slice(0, buffer.length - 1);
    break;

额外补充：键盘输入映射（可选） #

若要让键盘按键直接对应计算器操作，可新增handleKeydown函数实现按键映射：

function handleKeydown(event) {
    let key = event.key;
    // 数字与小数点
    if (!isNaN(key) || key === '.') {
        inputKeys(key);
    } 
    // 运算符转换
    else if (key === '/') inputKeys('÷');
    else if (key === '*') inputKeys('×');
    else if (key === '-') inputKeys('−');
    else if (key === '+') inputKeys('+');
    // 功能键
    else if (key === 'Enter' || key === '=') inputKeys('=');
    else if (key === 'Backspace') inputKeys('←');
    else if (key === 'Escape') inputKeys('C');
}

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