在键盘事件中通过keyCode校验仅允许特定字母输入是否安全？

方案说明 #

你不需要为特殊键盘布局做任何额外适配，也不存在你担心的性能问题，有非常成熟的方案可以实现需求：

1. 优先用KeyboardEvent.key替代废弃属性 #

你之前用的e.which已经被标准废弃，而KeyboardEvent.code是物理键位标识，本来就不是用来判断输入字符的。你应该用KeyboardEvent.key属性，它返回的是当前键盘布局、输入法状态下，按键实际输入的字符内容：比如Dvorak键盘按下对应QWERTY布局Q的物理键时，e.key会直接返回'，AZERTY布局下会直接返回a，完全不需要你手动适配不同布局。

如果要判断输入的是不是字母，直接做简单的正则判断即可：

// 判断输入字符是不是大小写字母
const isLetter = /^[a-zA-Z]$/.test(e.key)

2. 允许控制键的实现没有性能开销 #

如果你需要同时允许方向键、退格、功能键这类非输入控制键，不需要遍历列表，用Set存储允许的控制键即可，查询复杂度是O(1)，哪怕允许几十个控制键，每次按键的开销都可以忽略不计：

// 提前定义允许的控制键，仅初始化一次即可
const ALLOWED_CONTROL_KEYS = new Set([
  'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'
])

$("#hi").on("keydown", function(e) {
  // 是允许的字母 或者 是允许的控制键，就放行
  if (/^[a-zA-Z]$/.test(e.key) || ALLOWED_CONTROL_KEYS.has(e.key)) {
    // 你的业务逻辑
    alert('合法输入')
  } else {
    // 阻止非法输入
    e.preventDefault()
  }
})

3. 更简单的无键盘事件方案 #

如果你的需求只是限制输入框只能输入字母，完全不需要处理键盘事件，直接监听input事件做内容过滤即可，这种方案天然适配所有键盘布局、输入法，还能处理粘贴、右键插入等非按键输入场景：

$("#hi").on("input", function() {
  // 直接把所有非字母的内容替换为空
  this.value = this.value.replace(/[^a-zA-Z]/g, '')
})

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