如何用原生JavaScript实现文本框日期时间格式实时过滤

我之前也碰到过类似的需求，要做这种带可选规则的实时输入限制，光靠简单的字符过滤确实不够，得结合格式阶段校验和光标位置维护才行。下面是我验证过的解决方案，完美支持你要的规则：

核心思路 #

1. 分阶段校验：把整个格式拆成几个连续模块（日期部分→可选时间部分→AM/PM），每个模块只允许符合当前阶段的字符输入
2. 自动补全分隔符：比如用户输入完日期的2位数字后，自动补/；输入完小时后自动补:，提升输入体验
3. 维护光标位置：实时修改输入值后，必须把光标放回正确位置，不然用户输入会跳来跳去，体验极差
4. 支持可选规则：允许单数字的日/小时/分钟，也允许带前导零的，时间部分可以完全省略

代码实现 #

HTML部分 #

<input type="text" id="datetimeInput" placeholder="dd/mm/yyyy hh:mm am|pm" />

JavaScript部分 #

const input = document.getElementById('datetimeInput');
let lastValidValue = '';

input.addEventListener('input', function(e) {
  let value = e.target.value.replace(/[^0-9/:apm ]/gi, ''); // 先过滤所有非法字符
  const cursorPos = e.target.selectionStart; // 记录当前光标位置
  let newCursorPos = cursorPos;

  // 处理日期部分：dd/mm/yyyy
  // 补全日和月之间的/
  if (value.length >= 2 && value[2] !== '/' && !isNaN(parseInt(value[2]))) {
    value = value.slice(0, 2) + '/' + value.slice(2);
    if (cursorPos >= 2) newCursorPos++;
  }
  // 补全月和年之间的/
  if (value.length >= 5 && value[5] !== '/' && !isNaN(parseInt(value[5]))) {
    value = value.slice(0, 5) + '/' + value.slice(5);
    if (cursorPos >= 5) newCursorPos++;
  }
  // 限制年份为4位数字
  if (value.split('/')[2]?.length > 4) {
    const yearStartIndex = value.indexOf('/') + 1 + value.slice(value.indexOf('/')+1).indexOf('/') + 1;
    value = value.slice(0, yearStartIndex + 4);
    if (newCursorPos > value.length) newCursorPos = value.length;
  }

  // 处理时间部分（可选）：hh:mm am|pm
  const datePartEnd = value.indexOf(' ');
  if (datePartEnd !== -1) {
    let timePart = value.slice(datePartEnd + 1);
    // 补全小时和分钟之间的:
    if (timePart.length >= 2 && timePart[2] !== ':' && !isNaN(parseInt(timePart[2]))) {
      timePart = timePart.slice(0, 2) + ':' + timePart.slice(2);
      if (cursorPos >= datePartEnd + 1 + 2) newCursorPos++;
    }
    // 限制分钟为2位
    if (timePart.split(':')[1]?.length > 2) {
      const minuteStartIndex = timePart.indexOf(':') + 1;
      timePart = timePart.slice(0, minuteStartIndex + 2);
      if (newCursorPos > datePartEnd + 1 + timePart.length) newCursorPos = datePartEnd + 1 + timePart.length;
    }
    // 处理AM/PM部分，只允许a/p/m（不区分大小写），并统一转为小写
    const ampmPart = timePart.split(' ')[1]?.toLowerCase() || '';
    if (ampmPart.length > 2) {
      const ampmStartIndex = timePart.indexOf(' ') + 1;
      timePart = timePart.slice(0, ampmStartIndex + 2);
      if (newCursorPos > datePartEnd + 1 + timePart.length) newCursorPos = datePartEnd + 1 + timePart.length;
    }
    // 把处理后的时间部分拼回去
    value = value.slice(0, datePartEnd + 1) + timePart;
  }

  // 确保最终值符合基本格式规则，不符合则回退到上一个有效值
  const validRegex = /^(\d{1,2}\/\d{1,2}\/\d{4})( \d{1,2}(:\d{1,2})? (am|pm))?$/i;
  if (!validRegex.test(value) && value !== '') {
    value = lastValidValue;
    newCursorPos = e.target.selectionStart;
  } else {
    lastValidValue = value;
  }

  // 更新输入框值和光标位置
  e.target.value = value;
  e.target.setSelectionRange(newCursorPos, newCursorPos);
});

关键细节解释 #

• 非法字符过滤：先用replace(/[^0-9/:apm ]/gi, '')把所有不允许的字符直接去掉，比如除a/p/m外的字母、除/:空格外的特殊符号都被过滤
• 自动补充分隔符：当用户输入到应该出现/或:的位置时，自动插入分隔符，同时调整光标位置，让用户感觉不到突兀
• 光标位置维护：每次修改输入值前都记录光标位置，修改后根据插入的分隔符数量调整光标位置，保证用户输入流畅
• 可选规则支持：正则表达式明确允许日/月/小时/分钟是1或2位，时间部分完全可选
• 回退机制：如果用户输入的内容完全不符合规则（比如在日期部分输入字母），会自动回退到上一个有效的输入值，避免出现混乱内容

你可以直接把这段代码放到项目里测试，应该能完美满足你的需求——用户输入时会被强制遵循格式，不符合的内容要么被过滤，要么被自动修正，而且完全支持你提到的可选规则。

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