我来帮你搞定这个问题！看起来你在调整日期输入格式化时遇到了删除失效的坑，结合事件委托和无空格格式的需求，我整理了一套可行的解决方案：

核心思路 #

• 用事件委托监听全局输入事件，只作用于指定类的日期输入框
• 在格式化逻辑里加入删除操作判断，避免干扰用户正常编辑
• 实现无空格的MM/DD/YYYY格式，同时维护光标位置让输入更流畅

完整代码实现 #

// 辅助校验函数：确保输入的数字合法且不超过最大值
function checkValue(str, max) {
  if (str.charAt(0) !== '0' || str === '00') {
    const num = parseInt(str);
    if (isNaN(num) || num <= 0 || num > max) {
      str = '1';
    }
  }
  return str;
}

// 日期格式化核心逻辑
function formatDateInput(e) {
  const input = e.target;
  // 只处理标记了.date-input类的输入框（可根据需求调整选择器）
  if (!input.classList.contains('date-input')) return;

  // 先移除所有非数字字符，只保留纯数字
  let inputValue = input.value.replace(/\D/g, '');
  let formattedValue = '';

  // 处理月份部分（前2位）
  if (inputValue.length >= 2) {
    const month = checkValue(inputValue.substring(0, 2), 12);
    formattedValue += month;
    // 输入到2位数字时添加第一个斜杠（无空格）
    if (inputValue.length > 2) {
      formattedValue += '/';
      // 处理日期部分（第3-4位）
      const day = checkValue(inputValue.substring(2, 4), 31);
      formattedValue += day;
      // 输入到4位数字时添加第二个斜杠（无空格）
      if (inputValue.length > 4) {
        formattedValue += '/';
        // 处理年份部分（取前4位）
        formattedValue += inputValue.substring(4, 8);
      }
    }
  } else {
    formattedValue = inputValue;
  }

  // 只有格式化后内容变化时才更新，避免删除操作触发死循环
  if (input.value !== formattedValue) {
    input.value = formattedValue;
    // 把光标定位到内容末尾，保证输入流畅
    input.setSelectionRange(formattedValue.length, formattedValue.length);
  }
}

// 处理删除/退格键，避免格式化干扰正常删除
function handleKeyDown(e) {
  const input = e.target;
  if (!input.classList.contains('date-input')) return;

  // 按下Backspace或Delete时，特殊处理斜杠位置的删除
  if (e.key === 'Backspace' || e.key === 'Delete') {
    const cursorPos = input.selectionStart;
    // 如果光标在斜杠后面，删除时同步移除斜杠，避免格式化逻辑重新添加
    if (cursorPos > 0 && input.value.charAt(cursorPos - 1) === '/') {
      input.value = input.value.slice(0, cursorPos - 1) + input.value.slice(cursorPos);
      input.setSelectionRange(cursorPos - 1, cursorPos - 1);
      e.preventDefault();
    }
  }
}

// 事件委托：监听全局的input和keydown事件
document.addEventListener('input', formatDateInput);
document.addEventListener('keydown', handleKeyDown);

关键修复点 #

1. 删除操作兼容：在keydown事件中判断删除键，当光标处于斜杠位置时，同步删除斜杠，避免格式化逻辑把斜杠重新加回来，导致看起来无法删除。
2. 避免死循环：只有当格式化后的内容和当前输入框内容不同时才更新，防止删除操作触发input事件后被强制恢复内容。
3. 光标位置维护：格式化后自动把光标移到内容末尾，避免光标跳走影响输入体验。
4. 事件委托生效：通过类名筛选目标输入框，确保所有标记过的输入框都能自动应用格式化。

使用方法 #

给需要日期格式化的输入框添加date-input类即可：

<input type="text" class="date-input" placeholder="MM/DD/YYYY">
<input type="text" class="date-input" placeholder="MM/DD/YYYY">

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