为JavaScript计算器添加keyCode事件时的输入异常问题排查

开发者阿泽

2026-5-8

问题根源与修复方案

我仔细看了你的代码，发现键盘输入数字时出现前置0的问题，核心原因是键盘输入的逻辑没有和点击按钮的逻辑保持一致：

为什么会出问题？

点击数字按钮时，updateDisplayVal函数里有个关键判断：if (displayVal === '0') displayVal = '';，它会在当前显示值为0的时候清空，再添加新数字，避免出现01、012这种以0开头的字符串。
但你为每个数字键单独写的keyCodeOne、keyCodeTwo等函数里，直接执行displayVal += '数字'，完全没有处理displayVal === '0'的情况。当你按下运算符后，performOperation会把displayVal重置为'0'，此时键盘输入数字就会变成0+数字，比如输入12就变成'012'——在非严格模式下，eval会把这种以0开头的数字解析为八进制数，这就是你说的10以上数字计算结果不符合预期的根本原因（比如10 + 012会被计算成10 + 10 = 20，而不是22）。
另外你那段试图移除初始0的keys循环代码完全无效：它只是页面加载时执行一次，没有绑定到键盘事件，而且用了赋值keyCode = keys[i]而不是判断keyCode === keys[i]，根本起不到作用。

修复方案：统一键盘与鼠标输入逻辑

最简洁的方式是把键盘输入的处理逻辑和点击按钮对齐，甚至可以复用现有函数。我帮你重构了键盘事件的代码，删除了冗余的单个数字函数，用一个通用函数处理所有数字和运算符的键盘输入：

修改后的JavaScript关键代码

// 删除原来所有的keyCodeOne到keyCodeZero函数，以及那段无效的keys循环

// 统一处理键盘输入
document.addEventListener("keydown", function(event) {
  const key = event.key;
  
  // 处理数字键（0-9）
  if (/[0-9]/.test(key)) {
    // 和点击按钮完全一致的逻辑
    if (displayVal === '0') displayVal = '';
    displayVal += key;
    displayValElement.innerText = displayVal;
    event.preventDefault(); // 阻止默认输入行为
  }
  // 处理运算符键（+、-、*、/、=）
  else if (['+', '-', '*', '/', '='].includes(key)) {
    // 把键盘的运算符映射到按钮上的文本（比如*对应x，/对应÷）
    let operatorText = key;
    if (key === '*') operatorText = 'x';
    if (key === '/') operatorText = '÷';
    
    // 找到对应的运算符按钮，触发它的click事件，复用performOperation逻辑
    const targetBtn = Array.from(calcOperators).find(btn => btn.innerText === operatorText);
    if (targetBtn) targetBtn.click();
    event.preventDefault();
  }
  // 额外：支持按ESC键清空（对应AC按钮）
  else if (key === 'Escape') {
    clearBtn.click();
    event.preventDefault();
  }
  // 额外：支持按.键输入小数点
  else if (key === '.') {
    decimalBtn.click();
    event.preventDefault();
  }
}, false);

修复后的效果

按下运算符后，键盘输入数字会自动清空初始的0，比如输入12会直接显示12而不是012；
键盘输入运算符会直接复用按钮的performOperation逻辑，和点击按钮的行为完全一致；
新增了ESC清空、小数点键盘输入的便捷功能，提升用户体验。

完整代码参考（整合后）

<section id="mainContainer">
  <div id="calcContainer">
    <form id="form" name="form">
      <div id="displayBox">
        <div id="output" class="textView">0</div>
      </div>
    </form>
    <table id="table" class="calcTable" cellspacing="10px">
      <tbody>
        <tr>
          <td><button id="btnClear" class="calcBtn tr1">AC</button></td>
          <td><button id="btnPM" class="calcBtn tr1">+/-</button></td>
          <td><button id="btnPer" class="calcBtn tr1">%</button></td>
          <td><button id="btnDiv" class="calcBtn calcOp tr2">&#247</button></td>
        </tr>
        <tr>
          <td><button id="btn9" class="calcBtn calcNum">7</button></td>
          <td><button id="btn8" class="calcBtn calcNum">8</button></td>
          <td><button id="btn7" class="calcBtn calcNum">9</button></td>
          <td><button id="btnMul" class="calcBtn calcOp tr2">x</button></td>
        </tr>
        <tr>
          <td><button id="btn4" class="calcBtn calcNum">4</button></td>
          <td><button id="btn5" class="calcBtn calcNum">5</button></td>
          <td><button id="btn6" class="calcBtn calcNum">6</button></td>
          <td><button id="btnSub" class="calcBtn calcOp tr2">-</button></td>
        </tr>
        <tr>
          <td><button id="btn1" class="calcBtn calcNum">1</button></td>
          <td><button id="btn2" class="calcBtn calcNum">2</button></td>
          <td><button id="btn3" class="calcBtn calcNum">3</button></td>
          <td><button id="btnAdd" class="calcBtn calcOp tr2">+</button></td>
        </tr>
        <tr>
          <td colspan="2"><button id="btn0" class="calcBtn calcNum">0</button></td>
          <td><button id="btnDec" class="calcBtn">.</button></td>
          <td><button id="btnEq" class="calcBtn calcOp tr2">=</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<script>
var oneBtn = document.getElementById("btn1"); 
var twoBtn = document.getElementById("btn2"); 
var threeBtn = document.getElementById("btn3"); 
var fourBtn = document.getElementById("btn4"); 
var fiveBtn = document.getElementById("btn5"); 
var sixBtn = document.getElementById("btn6"); 
var sevenBtn = document.getElementById("btn7"); 
var eightBtn = document.getElementById("btn8"); 
var nineBtn = document.getElementById("btn9"); 
var zeroBtn = document.getElementById("btn0"); 
var decimalBtn = document.getElementById("btnDec"); 
var clearBtn = document.getElementById("btnClear"); 
var percentBtn = document.getElementById("btnPer"); 
var plusMinBtn = document.getElementById("btnPM"); 
var displayValElement = document.getElementById("output"); 
var calcNumBtns = document.getElementsByClassName("calcNum"); 
var calcOperators = document.getElementsByClassName("calcOp"); 

var displayVal = '0'; 
var pendingVal; 
var evalStringArray = []; 

var updateDisplayVal = (clickObj) => { 
  var btnText = clickObj.target.innerText; 
  if (displayVal === '0') displayVal = ''; 
  displayVal += btnText; 
  displayValElement.innerText = displayVal; 
} 

var performOperation = (clickObj) => { 
  var operator = clickObj.target.innerText; 
  switch (operator) { 
    case '+': 
      pendingVal = displayVal; 
      displayVal = '0'; 
      displayValElement.innerText = displayVal; 
      evalStringArray.push(pendingVal); 
      evalStringArray.push('+'); 
      break; 
    case '-': 
      pendingVal = displayVal; 
      displayVal = '0'; 
      displayValElement.innerText = displayVal; 
      evalStringArray.push(pendingVal); 
      evalStringArray.push('-'); 
      break; 
    case 'x': 
      pendingVal = displayVal; 
      displayVal = '0'; 
      displayValElement.innerText = displayVal; 
      evalStringArray.push(pendingVal); 
      evalStringArray.push('*'); 
      break; 
    case '÷': 
      pendingVal = displayVal; 
      displayVal = '0'; 
      displayValElement.innerText = displayVal; 
      evalStringArray.push(pendingVal); 
      evalStringArray.push('/'); 
      break; 
    case '=': 
      evalStringArray.push(displayVal); 
      var evaluation = eval(evalStringArray.join(' ')); 
      displayVal = evaluation + ''; 
      displayValElement.innerText = displayVal; 
      evalStringArray = []; 
      break; 
    default: 
      break; 
  } 
} 

for (let i = 0; i < calcNumBtns.length; i++) { 
  calcNumBtns[i].addEventListener('click', updateDisplayVal, false); 
} 

for (let i = 0; i < calcOperators.length; i++) { 
  calcOperators[i].addEventListener('click', performOperation, false); 
} 

// 统一处理键盘输入（替换原来所有单个数字的keyCode函数）
document.addEventListener("keydown", function(event) {
  const key = event.key;
  
  // 处理数字键（0-9）
  if (/[0-9]/.test(key)) {
    if (displayVal === '0') displayVal = '';
    displayVal += key;
    displayValElement.innerText = displayVal;
    event.preventDefault();
  }
  // 处理运算符键
  else if (['+', '-', '*', '/', '='].includes(key)) {
    let operatorText = key;
    if (key === '*') operatorText = 'x';
    if (key === '/') operatorText = '÷';
    
    const targetBtn = Array.from(calcOperators).find(btn => btn.innerText === operatorText);
    if (targetBtn) targetBtn.click();
    event.preventDefault();
  }
  // ESC清空
  else if (key === 'Escape') {
    clearBtn.click();
    event.preventDefault();
  }
  // 小数点
  else if (key === '.') {
    decimalBtn.click();
    event.preventDefault();
  }
}, false);
</script>

这样修改后，不管是点击按钮还是键盘输入，行为都会完全一致，再也不会出现前置0导致的计算错误了。

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

为JavaScript计算器添加keyCode事件时的输入异常问题排查

为什么会出问题？ #

修复方案：统一键盘与鼠标输入逻辑 #

修改后的JavaScript关键代码

修复后的效果

完整代码参考（整合后） #

为什么会出问题？

修复方案：统一键盘与鼠标输入逻辑

完整代码参考（整合后）