HTML表单出生日期输入框：自动加斜杠及禁止字母输入问题咨询

我来帮你搞定这个问题！你已经完成了自动格式化的功能，现在要禁止字母输入且不破坏现有逻辑，其实只需要调整输入处理的顺序，先过滤掉非数字字符，再执行格式化即可。下面是完整的实现代码和说明：

HTML 结构 #

先保留你的基础输入框结构：

<label for="date_of_birth">出生日期：</label>
<input type="text" id="date_of_birth" maxlength="10" placeholder="MM/DD/YYYY">

JavaScript 处理逻辑 #

我们通过两个事件来实现需求：一个处理输入内容的过滤和格式化，另一个直接阻止字母键的输入，提升用户体验。

1. 输入内容过滤+自动格式化 #

这个事件会在用户输入内容时，先清除所有非数字字符，再执行自动加斜杠的格式化：

const dobInput = document.getElementById('date_of_birth');

dobInput.addEventListener('input', function(e) {
  // 第一步：过滤掉所有非数字字符（字母、符号等全部清除）
  let cleanValue = e.target.value.replace(/[^0-9]/g, '');
  
  // 第二步：自动添加斜杠，格式化为 MM/DD/YYYY
  let formattedValue = cleanValue
    .replace(/(\d{2})(\d)/, '$1/$2') // 第2位数字后加斜杠（月份结束）
    .replace(/(\d{2}\/\d{2})(\d)/, '$1/$2'); // 第4位数字后加斜杠（日期结束）
  
  // 限制总长度不超过10位（MM/DD/YYYY的完整长度）
  formattedValue = formattedValue.substring(0, 10);
  
  // 更新输入框的值
  e.target.value = formattedValue;
});

2. 阻止字母键输入（可选但推荐） #

添加这个事件后，用户按下字母键时会直接被阻止输入，避免无效字符短暂显示的情况：

dobInput.addEventListener('keydown', function(e) {
  // 允许的按键：数字键、功能键（退格、删除、箭头、Tab）
  const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','Backspace','Delete','ArrowLeft','ArrowRight','Tab'];
  
  // 阻止非允许按键（同时忽略Ctrl/Command组合键，比如Ctrl+C复制）
  if (!allowedKeys.includes(e.key) && !e.ctrlKey && !e.metaKey) {
    e.preventDefault();
  }
});

为什么这样有效？ #

• 过滤逻辑优先：我们先把所有非数字字符清除，确保格式化处理的只有数字，完全避免了字母干扰自动加斜杠的逻辑。
• 双事件配合：input事件兜底处理（比如用户粘贴字母的情况），keydown事件提前拦截，让用户体验更流畅。
• 完全兼容原有格式化：你的自动加斜杠逻辑被完整保留，只是输入源被过滤成了纯数字，不会出现任何冲突。

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