如何限制输入仅允许字母和特殊字符、禁止数字？求JS/JQ示例

我太懂这种困扰了——HTML自带的pattern属性确实只有在表单提交的时候才会跳出来报错，输入过程中根本拦不住数字或者符号，体验感太差了！别担心，下面给你准备了原生JavaScript和jQuery两种实现方案，都能实时限制只能输入字母：

原生JavaScript 实现 #

方案一：实时过滤非字母字符（推荐） #

这种方式能覆盖手动输入、粘贴、拖拽输入等所有修改输入框内容的场景，直接把非字母的字符清除掉：

// 获取目标输入框
const alphaInput = document.getElementById('your-input-id');

// 监听输入事件
alphaInput.addEventListener('input', function() {
  // 用正则替换掉所有非大小写字母的字符
  this.value = this.value.replace(/[^A-Za-z]/g, '');
});

方案二：阻止非字母按键输入 #

如果想在用户按下非字母键时直接阻止输入（但注意这种方式没法处理粘贴的内容，建议和上面的方案结合使用）：

alphaInput.addEventListener('keydown', function(e) {
  const key = String.fromCharCode(e.keyCode || e.which);
  // 允许字母键，以及退格、删除、箭头键、Tab这些控制键
  if (!/[A-Za-z]/.test(key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
    e.preventDefault(); // 阻止默认输入行为
  }
});

jQuery 实现 #

如果你的项目已经在用jQuery，代码会更简洁：

实时过滤版（推荐） #

$('#your-input-id').on('input', function() {
  // 过滤非字母字符
  $(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
});

按键阻止版 #

$('#your-input-id').on('keydown', function(e) {
  const key = String.fromCharCode(e.keyCode || e.which);
  if (!/[A-Za-z]/.test(key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
    e.preventDefault();
  }
});

小提示：优先选择实时过滤的方案，因为它能处理所有修改输入框内容的场景，比单纯阻止按键更全面哦～

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