JS计算器键盘输入与点击操作的display文本更新行为不一致问题

你遇到的问题是键盘输入数字时，没处理「按下运算符后首次输入数字」的状态，直接拼接按键内容，导致运算符留在显示区。和点击按钮的逻辑对比，点击时会先清空显示再添加数字，而键盘输入没做这个判断。

按照下面的方法修改代码即可对齐两种输入方式的行为：

1. 新增一个状态变量，用来标记是否刚按下运算符、等待输入第二个操作数：

let isWaitingForOperand = false;

2. 在点击运算符按钮和按下键盘运算符的逻辑里，将这个状态设为true（表示接下来第一次输入数字要清空显示）：

// 点击运算符按钮的代码里添加
isWaitingForOperand = true;

// 键盘按下运算符的代码里添加
else if (['+', '-', '*', '/'].includes(e.key)) {
  isWaitingForOperand = true;
  // 你的其他运算符处理逻辑...
}

3. 修改键盘数字输入的逻辑，根据状态决定是清空显示还是追加数字：

document.addEventListener('keydown', function(e) {
  if (e.key >= '0' && e.key <= '9') {
    if (isWaitingForOperand) {
      // 首次输入数字，直接替换显示内容
      calcDisplay.textContent = e.key;
      isWaitingForOperand = false; // 重置状态，后续输入追加
    } else {
      // 非首次输入，正常追加
      calcDisplay.textContent += e.key;
    }
    // 你的其他数字处理逻辑...
  }
  // 其他按键处理...
});

这样调整后，按下运算符再用键盘输入数字，就会像点击按钮一样，先清空显示区的运算符，直接显示新输入的数字，后续数字正常拼接，和iOS计算器的行为一致。

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