HTML模拟键盘Bug：点击屏幕按钮后按实体空格/回车重复字符

核心问题是点击按钮后按钮会获得焦点，当按下实体键盘的空格或回车键时，浏览器会触发聚焦元素的默认激活行为——等同于再次点击了按钮，所以keyClick("a")会被额外调用一次；同时你的keypress监听器又会处理空格/回车，最终导致按钮字符在空格/回车后重复出现。

另外代码里还有个小问题：keypress事件中，空格对应的e.key是空格字符" "，而非字符串"Space"，所以原代码里keyClick函数里的key == "Space"判断永远不会触发，按下空格时会走else分支直接添加空格字符，不过这不是导致重复的核心原因。

方案1：点击按钮后立即移除焦点 #

最简单的方式是点击按钮后让它失去焦点，这样按下空格/回车时就不会触发按钮的默认点击行为：

<button id="a" onClick="keyClick(this.id); this.blur();">a</button>

方案2：阻止按钮的空格/回车默认行为 #

如果需要保留按钮的焦点（比如做键盘导航），可以给按钮添加事件监听器，阻止空格和回车的默认动作：

// 给所有模拟键盘按钮绑定这个事件
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('keydown', function(e) {
    if (e.key === 'Space' || e.key === 'Enter') {
      e.preventDefault();
    }
  });
});

方案3：修正键盘事件的key判断（可选） #

把keypress事件换成更可靠的keydown，并修正key值的判断，简化逻辑：

window.addEventListener('keydown', function(e) {
  let inputKey;
  if (e.key === "Space") {
    inputKey = " ";
  } else if (e.key === "Enter") {
    inputKey = "\n";
  } else {
    // 转为小写，确保输入统一（可选，根据需求调整）
    inputKey = e.key.toLowerCase();
  }
  keyClick(inputKey);
});

// 简化keyClick函数
function keyClick(key) {
  const textEl = document.getElementById('text');
  textEl.textContent += key;
}

采用任意一种方案后，点击屏幕按钮再按实体空格/回车，只会添加对应的空格或换行，不会重复显示按钮的字符了。

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