在keydown事件调用JavaScript函数时出现ReferenceError错误求助

嘿，我来帮你捋捋这个报错的根源，然后给你修复方案——你的代码里主要是函数作用域和事件处理逻辑出了点小问题：

核心问题：函数被“藏”在了局部作用域里 #

你把check函数定义在了item_set内部的$(document).ready()回调里，这会让check变成一个局部函数，只有那个回调内部的代码能访问它。如果你的keydown事件是通过内联属性（比如onkeydown="check('xxx')"）绑定的，外部根本找不到这个函数，自然就抛出ReferenceError了。

另外，你的代码还有几个小坑：

• 重复嵌套$(document).ready()：item_set本身已经在页面就绪时被调用了，内部没必要再套一层
• 错误地从DOM元素上取keyCode：keyCode是事件对象的属性，不是元素的
• keyCode已经被浏览器废弃了，现在推荐用e.key或者e.code来判断按键，兼容性和可读性都更好

修复后的完整代码示例 #

先假设你的HTML是这样的（如果是内联绑定的话） #

<input type="text" id="numberInput" onkeydown="checkInput(event, 'numberInput')">

优化后的custom.js代码 #

// 把checkInput放在全局作用域，这样内联事件能访问到
function checkInput(e, idname) {
  e = e || window.event; // 兼容旧IE
  
  // 允许的基础按键：退格、删除、制表符、退出、回车和点号
  const allowedKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'Decimal', 'Period'];
  // 允许全选快捷键：Ctrl+A / Command+A
  const isSelectAll = (e.key.toLowerCase() === 'a' && (e.ctrlKey || e.metaKey));

  // 如果是允许的按键或全选，放行
  if (allowedKeys.includes(e.key) || isSelectAll) {
    return true;
  }

  // 如果是数字，也放行
  if (!isNaN(parseInt(e.key, 10))) {
    return true;
  }

  // 其他按键阻止默认行为
  e.preventDefault();
  return false;
}

$(document).ready(function() {
  function item_set() {
    // 这里放你的item_set逻辑
    console.log('页面就绪，执行item_set');
  }

  item_set();

  // 更推荐的方式：不用内联事件，直接用jQuery绑定
  // $('#numberInput').on('keydown', function(e) {
  //   checkInput(e, 'numberInput');
  // });
});

关键优化说明 #

1. 调整作用域：如果用内联事件绑定，必须把checkInput放在全局作用域；如果用jQuery的on方法绑定（推荐这种，避免全局污染），可以把函数放在ready回调内部
2. 正确获取事件对象：事件对象是作为参数传递给处理函数的，要从参数里取，不是从DOM元素上拿
3. 替换废弃API：用e.key代替keyCode，比如判断退格键直接写'Backspace'，比数字46好理解多了
4. 避免重复就绪回调：$(document).ready()只需要在外层写一次，内部不需要嵌套

最后排查点 #

如果还是报错，检查这几个地方：

• 确保custom.js在jQuery之后引入，不然jQuery的方法会先报错
• 检查函数名拼写，比如是不是把check写成了chek
• 如果用jQuery绑定事件，确保选择器能正确找到DOM元素

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