如何阻止按下Enter键触发Input标签的change事件？

需求说明：需保留Input标签的change事件以应对其他场景，但按下Enter键时不应触发该事件。

问题分析 #

当前代码中，按下Enter键后若Input失去焦点，依然会触发change事件，这不符合需求。我们需要通过状态标记区分触发change事件的场景，拦截Enter键导致的触发。

修改后的代码 #

const inp = document.querySelector("#inp");
let isEnterTriggered = false;

inp.addEventListener("change", changeHandler);
inp.addEventListener("keyup", keyupHandler);
inp.addEventListener("keydown", e => {
  // 标记是否按下了Enter键
  isEnterTriggered = e.keyCode === 13;
  if (isEnterTriggered) {
    e.preventDefault(); // 阻止默认行为，避免表单自动提交（若存在表单）
  }
});

function changeHandler(e) {
  // 如果是Enter键导致的change触发，直接返回不执行逻辑
  if (isEnterTriggered) {
    isEnterTriggered = false; // 重置标记
    return;
  }
  console.log(e.target.value);
}

function keyupHandler(e) {
  if (e.keyCode === 13) {
    console.log("Enter key pressed");
    // 可选：按下Enter后保持输入框焦点，避免意外触发change
    // e.target.focus();
  } else {
    // 其他按键触发时重置标记
    isEnterTriggered = false;
  }
}

原理说明 #

1. 通过keydown事件监听Enter键，设置状态标记isEnterTriggered
2. 在change事件回调中检查该标记，若为true则跳过业务逻辑并重置标记
3. 在非Enter键的keyup事件中重置标记，确保正常输入场景下change事件能正常触发

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