如何在JavaScript/jQuery中仅允许输入类ASCII码并屏蔽功能键？

原代码问题分析 #

你的代码存在两个核心问题：

1. 逻辑倒置：原本是允许的输入却调用了event.preventDefault()，导致合法输入被拦截，应该反过来——不允许的/需要屏蔽的输入才阻止默认行为
2. 遗漏空格判断：空格的ASCII码是32，未加入允许条件

最优实现方案 #

推荐使用event.key（替代已废弃的keyCode）来实现，代码更直观易维护，以下分jQuery和原生JS版本：

jQuery版本

$('#your-input-element').on('keydown', function(event) {
  const inputKey = event.key;
  // 匹配允许的字符：数字、大小写字母、空格
  const allowedPattern = /^[a-zA-Z0-9\s]$/;
  // 要屏蔽的功能键列表
  const blockedKeys = ['Enter', 'Control', 'Alt', 'Delete', 'Escape', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];

  // 直接屏蔽指定功能键
  if (blockedKeys.includes(inputKey)) {
    event.preventDefault();
    return;
  }

  // 拦截非允许的可打印字符
  if (inputKey.length === 1 && !allowedPattern.test(inputKey)) {
    event.preventDefault();
  }

  // 如果是要追加内容到元素（原代码的需求），仅允许合法字符时添加
  if (allowedPattern.test(inputKey)) {
    $(this).html($(this).html() + inputKey);
  }
});

原生JavaScript版本

document.getElementById('your-input-element').addEventListener('keydown', function(event) {
  const inputKey = event.key;
  const allowedPattern = /^[a-zA-Z0-9\s]$/;
  const blockedKeys = ['Enter', 'Control', 'Alt', 'Delete', 'Escape', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];

  if (blockedKeys.includes(inputKey)) {
    event.preventDefault();
    return;
  }

  if (inputKey.length === 1 && !allowedPattern.test(inputKey)) {
    event.preventDefault();
  }

  if (allowedPattern.test(inputKey)) {
    this.innerHTML += inputKey;
  }
});

方案优势 #

1. 兼容性更好：event.key是现代标准API，替代已废弃的keyCode，适配更多浏览器
2. 逻辑清晰：先屏蔽指定功能键，再拦截非允许的可打印字符，避免误判
3. 易维护：正则表达式和功能键列表可快速调整允许/屏蔽范围

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