为什么绑定在提交按钮上的Enter按键键盘事件函数无法正常触发

1. 事件绑定目标错误：keyup事件被绑定到类为.subText的提交按钮上，用户输入内容时焦点位于#fname输入框，未获得焦点的按钮无法触发键盘事件，导致判断逻辑始终不执行。
2. 废弃API使用：event.keyCode已被Web标准废弃，不同浏览器兼容性表现不稳定，建议替换为event.key属性判断按键。

方案1：将事件绑定到输入框（精准触发，推荐） #

document.querySelector("#fname").addEventListener("keyup", function(event) {
  if (event.key === 'Enter') {
    let x = this.value;
    console.log(x);
    // 此处可直接调用原有提交逻辑 addNote()
  }
});

方案2：全局监听回车提交（仅在需要全页面回车触发时使用） #

document.addEventListener("keyup", function(event) {
  // 增加焦点判断，避免其他输入场景误触发
  if (event.key === 'Enter' && document.activeElement.id === 'fname') {
    let x = document.querySelector("#fname").value;
    console.log(x);
  }
});

如果你的JS代码写在<head>标签内，需要确保DOM加载完成后再执行元素选择和事件绑定，否则会因找不到对应元素导致绑定失败，示例如下：

document.addEventListener('DOMContentLoaded', function() {
  // 所有事件绑定代码放在此处
  document.querySelector("#fname").addEventListener("keyup", function(event) {
    if (event.key === 'Enter') {
      console.log(this.value);
    }
  });
})

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