Vanilla JavaScript虚拟键盘空格键仅输入单个空格问题求助

核心问题 #

1. 键盘空格判断条件错误：代码里写的event.code === " Space"多了个空格，正确的event.code值是"Space"，导致键盘空格触发时根本没进入对应分支。
2. 事件类型选错：用keyup事件监听键盘输入，按住空格时keyup只会在松开时触发一次，无法实现连续输入；应该用keydown事件，按住按键时它会重复触发。
3. 数据不同步：点击虚拟空格按钮、键盘输入空格时，都没更新array数组，导致array和显示的文本内容不一致，删除功能会出错。

修复后的代码 #

let buttons = document.querySelectorAll(".letter-btn");
let typedText = document.querySelector(".typing-text");
let spaceBtn = document.querySelector(".space-btn");
let deleteBtn = document.querySelector(".delete-btn");
let array = [];

// 虚拟字母按钮点击事件
buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    let letter = event.target.innerText;
    addText(letter);
  });
});

// 虚拟空格按钮点击事件
spaceBtn.addEventListener("click", () => {
  addText(" ");
});

// 删除按钮点击事件
deleteBtn.addEventListener("click", () => {
  array.pop();
  typedText.textContent = array.join("");
});

// 键盘输入事件（改用keydown）
document.addEventListener("keydown", (event) => {
  // 阻止默认行为，避免浏览器自带的空格滚动等干扰
  if (event.key === " " || event.key === "Backspace") {
    event.preventDefault();
  }

  if (event.key === "Backspace") {
    array.pop();
    typedText.textContent = array.join("");
  } else if (event.key === " ") {
    addText(" ");
  } else {
    // 只处理字母/数字等可见字符，避免功能键干扰
    if (/^[a-zA-Z0-9]$/.test(event.key)) {
      addText(event.key);
    }
  }
});

// 统一的文本添加函数，保证数组和显示内容同步
function addText(char) {
  typedText.textContent += char;
  array = typedText.textContent.split("");
}

关键优化点 #

• 新增addText函数，统一处理文本添加和数组同步，避免重复代码和数据不一致。
• 键盘事件改用keydown，并阻止空格和退格的默认行为（比如空格会让页面滚动）。
• 修正键盘空格的判断条件，直接用event.key === " "更直观。
• 限制键盘输入仅处理可见字符，避免功能键（如Shift、Ctrl）误输入。

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