日期输入自动加斜杠功能的删除交互问题及优化建议求助

原有的日期格式化函数可以实现移除非数字字符并自动插入斜杠，但存在明显交互bug：从右往左删除字符时，光标会卡在斜杠位置，无法连续删除。比如输入05/18/2023后，想要删除18部分，光标会停在05/的斜杠处，必须手动删掉斜杠才能继续删除前面的数字。

核心问题原因 #

原函数只修改了输入框的值，完全忽略了光标位置的处理。每次修改input.value后，浏览器会默认重置光标位置，加上斜杠的插入/移除，最终导致光标错位。

修复方案：跟踪并调整光标位置 #

下面是改进后的函数，核心是修改输入值前后记录并调整光标位置，确保删除操作流畅：

function formatDate(input) {
  // 记录当前光标位置
  const cursorPosition = input.selectionStart;
  const originalValue = input.value;
  // 过滤所有非数字字符
  let numericValue = originalValue.replace(/\D/g, '');

  // 构建格式化后的日期字符串
  let formattedValue = '';
  if (numericValue.length >= 2) {
    formattedValue += numericValue.slice(0, 2) + '/';
    if (numericValue.length >= 5) {
      formattedValue += numericValue.slice(2, 5) + '/';
      formattedValue += numericValue.slice(5);
    } else {
      formattedValue += numericValue.slice(2);
    }
  } else {
    formattedValue = numericValue;
  }

  // 仅当值发生变化时更新，避免无效操作
  if (originalValue !== formattedValue) {
    input.value = formattedValue;
    
    // 计算光标位置偏移量：对比前后光标前的斜杠数量差
    const originalSlashes = (originalValue.slice(0, cursorPosition).match(/\//g) || []).length;
    const newSlashes = (formattedValue.slice(0, cursorPosition).match(/\//g) || []).length;
    let newCursorPos = cursorPosition + (newSlashes - originalSlashes);

    // 确保光标位置在合法范围内
    newCursorPos = Math.max(0, Math.min(newCursorPos, formattedValue.length));
    input.setSelectionRange(newCursorPos, newCursorPos);
  }
}

关键优化点 #

• 光标位置跟踪：修改值前先获取光标位置，避免浏览器自动重置光标。
• 斜杠差值计算：通过对比修改前后光标位置前的斜杠数量，计算光标需要调整的偏移量，确保删除时光标跟随用户操作逻辑。
• 避免冗余更新：只有当格式化后的值和原始值不同时才更新输入框，减少不必要的DOM操作和光标调整。

其他可行实现思路 #

如果不想手动处理光标，也可以直接使用HTML5原生的input[type="date"]控件，它自带日期格式化和交互逻辑，但样式定制性较差。如果需要自定义样式，上面的光标调整方案是更灵活的选择。

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