如何在独立函数中监听input按键触发onkeydown逻辑（代码无响应）

两版代码的共性错误 #

• 事件属性使用错误：event.code返回的是字符串类型的按键标识（比如Delete/Enter），并非数字键码，直接和数字46、13做相等判断永远无法命中。同时charCode仅在可打印字符输入时返回有效ASCII值，控制键（Ctrl、Delete、Enter等）触发时charCode值为0，开头的拦截判断会直接命中返回，后续逻辑完全不执行。
• 事件对象引用混乱：内联绑定时未传入事件对象，函数内混用全局event和未定义的e变量，直接触发引用错误中断执行；addEventListener版本也没有正确读取回调参数里的事件对象。
• 函数名不匹配：addEventListener版本绑定的回调名是findKey，实际定义的函数名是find_key，运行时会直接报函数未定义错误。

第一版内联绑定的专属问题 #

• 内联事件调用时仅传了this和this.id两个参数，没有传递事件对象，函数内无法稳定拿到按键相关属性。

第二版addEventListener绑定的专属问题 #

• 绑定目标错误：getElementsByClassName('tiger')返回的是DOM元素集合，不是单个元素，集合本身没有addEventListener方法，直接调用会抛出类型错误。
• 事件类型选择错误：keypress事件仅在可打印字符输入时触发，Delete、Ctrl、Enter这类控制键在多数浏览器下不会触发该事件，根本无法监听到组合键操作。

可直接运行的修正代码 #

方案1：内联绑定修正版 #

HTML部分：

<input onkeydown="find_key(event, this, this.id)" id="P${i}" />

JS部分：

function find_key(e, inputEl, Fid) {
  const Fval = inputEl.value;
  // 仅拦截单字符非法输入，放行控制键
  if (e.key.length === 1 && (e.key.charCodeAt(0) <= 47 || e.key.charCodeAt(0) >= 64)) {
    e.preventDefault();
    return;
  }

  // 监听Ctrl/Cmd + Delete
  if ((e.ctrlKey || e.metaKey) && e.code === 'Delete') {
    alert('Undo!');
  }

  // 监听Ctrl + Enter
  if (e.ctrlKey && e.code === 'Enter') {
    alert("grab");
    grabName(Fval, Fid);
  }
}

方案2：事件绑定修正版（推荐，无内联事件耦合） #

HTML部分：

<input class="tiger" id="P${i}" />

JS部分：

// 遍历所有匹配的input元素逐个绑定事件
document.querySelectorAll('.tiger').forEach(input => {
  // 使用keydown事件监听所有按键操作
  input.addEventListener('keydown', findKey);
});

function findKey(e) {
  const inputEl = e.target;
  const Fval = inputEl.value;
  const Fid = inputEl.id;

  // 拦截非法单字符输入
  if (e.key.length === 1 && (e.key.charCodeAt(0) <= 47 || e.key.charCodeAt(0) >= 64)) {
    e.preventDefault();
    return;
  }

  if ((e.ctrlKey || e.metaKey) && e.code === 'Delete') {
    alert('Undo!');
  }

  if (e.ctrlKey && e.code === 'Enter') {
    alert("grab");
    grabName(Fval, Fid);
  }
}

编写注意事项 #

• 优先使用标准的e.code/e.key属性判断按键，已经废弃的keyCode/charCode属性不建议继续使用。
• 不要在逻辑开头直接拦截所有非指定ASCII区间的事件，控制键不会返回有效charCode值，会被误拦截。
• 通过类名、标签名获取的DOM集合必须遍历后逐个绑定事件，不能直接在集合对象上调用事件监听方法。
• 事件回调的第一个参数就是标准事件对象，直接使用该参数即可，不要依赖全局event避免兼容性问题。

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