如何区分键盘上的两个回车键？含条码扫描场景需求

区分普通键盘的两个Enter键 #

标准键盘的主键盘区Enter和数字小键盘区Enter，在浏览器键盘事件中可通过code属性区分：

• 主键盘Enter的code值为Enter
• 数字小键盘Enter的code值为NumpadEnter

你之前的测试代码仅打印了e.key（两个Enter的e.key均为"Enter"），因此看不到差异。修改监听代码即可识别区别：

myInput.addEventListener("keydown", (e) => {
  console.log(`key: ${e.key}, code: ${e.code}`);
  myOutput.innerHTML += `<br>key: ${e.key}, code: ${e.code}`;
});

处理条码阅读器附带的Enter #

不想修改阅读器设置的话，可尝试以下两种方案：

方案一：通过输入速度判断

条码扫描是连续快速的输入行为，手动输入（含手动按Enter）的间隔时间明显更长。可通过记录输入时间差来区分：

let lastInputTime = 0;
// 阈值可根据实际扫描速度调整，单位毫秒
const BARCODE_INPUT_THRESHOLD = 100;

myInput.addEventListener("keydown", (e) => {
  const now = Date.now();
  const timeDiff = now - lastInputTime;
  lastInputTime = now;

  if (e.key === "Enter" && timeDiff < BARCODE_INPUT_THRESHOLD) {
    // 判定为条码附带的Enter，阻止默认行为并清除输入框末尾回车
    e.preventDefault();
    myInput.value = myInput.value.trimEnd();
    myOutput.innerHTML += "<br>条码附带的Enter已剔除";
  } else if (e.key === "Enter") {
    myOutput.innerHTML += "<br>普通Enter触发";
  }
});

方案二：通过扫描码区分（部分阅读器适用）

部分条码阅读器发送的Enter对应的code属性与普通键盘不同，若能确认这一点，可直接通过e.code判断并拦截：

myInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && e.code === "NumpadEnter") {
    // 假设条码阅读器发送的是小键盘Enter，可根据实际情况修改
    e.preventDefault();
    myInput.value = myInput.value.trimEnd();
    myOutput.innerHTML += "<br>条码附带的Enter已剔除";
  }
});

内容的提问来源于stack exchange，提问作者w.k