如何使仅允许输入文本的JS代码支持退格键（已支持删除键）

嘿，这个问题很好解决！核心原因就是你原来的代码没把退格键加入「允许放行」的列表里，导致浏览器默认的退格行为被阻止了～下面给你具体的修改方案：

问题根源 #

退格键（Backspace）和删除键（Delete）都属于浏览器的默认控制按键，如果你在键盘事件里只允许了删除键，却没把退格键加入白名单，当用户按退格时，代码会触发preventDefault()，直接阻止了它的默认删除功能。

修改后的代码示例 #

推荐使用更现代的e.key属性（而非已经废弃的keyCode）来判断按键，可读性和兼容性更好：

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

targetInput.addEventListener('keydown', function(e) {
  // 定义允许的控制按键：退格、删除
  const allowedControls = ['Backspace', 'Delete'];
  // 检查输入是否是字母/数字
  const isAlphanumeric = /^[a-zA-Z0-9]$/.test(e.key);
  
  // 如果既不是字母数字，也不是允许的控制键，就阻止输入
  if (!isAlphanumeric && !allowedControls.includes(e.key)) {
    e.preventDefault();
  }
});

补充说明（可选） #

如果你的需求支持中文输入，上面的代码可能会阻止输入法的临时输入字符，这时候需要额外处理输入法的组合事件：

let isComposing = false;

targetInput.addEventListener('compositionstart', function() {
  isComposing = true;
});

targetInput.addEventListener('compositionend', function(e) {
  isComposing = false;
  // 这里可以额外过滤中文输入里的特殊字符
  const cleanedValue = e.target.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '');
  e.target.value = cleanedValue;
});

targetInput.addEventListener('keydown', function(e) {
  if (isComposing) return; // 输入法输入时不拦截
  
  const allowedControls = ['Backspace', 'Delete'];
  const isAlphanumeric = /^[a-zA-Z0-9]$/.test(e.key);
  
  if (!isAlphanumeric && !allowedControls.includes(e.key)) {
    e.preventDefault();
  }
});

这样既保留了退格/删除键的功能，又能严格限制只输入文本（字母、数字或中文，可根据需求调整正则），同时不会影响输入法的正常使用。

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