按键监听器Enter键失效：keyAdd函数存在何种问题？

让我来帮你拆解keyAdd函数里导致Enter键失效的几个关键问题：

1. 使用了已废弃的keyCode属性 #

event.keyCode是MDN明确标记为废弃的API，虽然部分旧浏览器还能兼容，但它的行为并不稳定，对Enter键这类按键的识别在不同环境下可能出现偏差。当前标准且兼容性更好的判断方式是使用event.key === 'Enter'或者event.code === 'Enter'。

2. 未阻止Enter键的默认行为 #

当在输入框按下Enter键时，浏览器会触发默认行为（比如输入框在表单内时，会自动提交表单导致页面刷新），这会直接打断你的checkId()逻辑执行，看起来就像是Enter键没起作用。你需要在触发自定义逻辑后，调用event.preventDefault()来阻止这个默认行为。

3. 可能存在DOM元素未加载完成的隐患 #

如果你的keyAdd函数在DOM还没完全加载时就执行了，passwordBox会返回null，此时调用addEventListener会直接报错，导致按键监听根本没被绑定成功。必须确保在DOM内容加载完成后再初始化监听函数。

修复后的完整代码示例 #

function checkId() { 
  var password = document.getElementById("passwordBox").value; 
  if (password === "superx") { 
    alert("Allowed :)");
    return true; 
  }; 
  alert("Not Allowed :("); 
  return false; 
}; 

function keyAdd() { 
  const passwordBox = document.getElementById("passwordBox");
  // 先判断元素是否存在，避免控制台报错
  if (!passwordBox) return;
  
  passwordBox.addEventListener("keypress", function(event) { 
    // 使用标准API判断Enter键
    if (event.key === 'Enter') { 
      checkId();
      // 阻止默认行为，避免页面刷新或表单自动提交
      event.preventDefault();
    } 
  }); 
}; 

// 确保DOM加载完成后再绑定监听事件
document.addEventListener('DOMContentLoaded', keyAdd);

内容的提问来源于stack exchange，提问作者zakaria.anam