自定义浮点输入框退格后无法自动补充分隔符的问题

问题根源 #

当退格得到12345（5位整数）后，继续输入数字会触发正则验证失败（整数部分最多5位），导致输入被回滚至上一个有效值。核心问题是退格到5位整数状态时，系统未自动补充分隔符，无法切换到小数输入模式。

修复后的代码 #

HTML #

<input type="text" id="text-box" name="text_box" class="input-box" placeholder=""/>

JavaScript #

const input = document.querySelector("#text-box");
const decimalSeparator = ",";
let lastValidValue = "";

input.addEventListener("input", () => {
  let value = input.value;
  // 过滤非允许字符（仅保留数字和分隔符）
  value = value.replace(new RegExp(`[^\\d${decimalSeparator}]`, 'g'), '');
  
  // 处理多个分隔符的异常情况
  const separatorCount = (value.match(new RegExp(`\\${decimalSeparator}`, 'g')) || []).length;
  if (separatorCount > 1) {
    const parts = value.split(decimalSeparator);
    value = parts[0] + decimalSeparator + parts.slice(1).join('');
  }

  // 拆分并裁剪整数、小数部分
  const [integerPart, decimalPart = ""] = value.split(decimalSeparator);
  const trimmedInteger = integerPart.slice(0, 5);
  const trimmedDecimal = decimalPart.slice(0, 2);
  
  // 构建有效值
  let validValue = trimmedInteger;
  if (trimmedDecimal.length > 0 || value.includes(decimalSeparator)) {
    validValue += decimalSeparator + trimmedDecimal;
  }
  // 关键修复：5位整数自动补充分隔符
  else if (trimmedInteger.length === 5) {
    validValue += decimalSeparator;
  }

  // 更新输入框并调整光标位置
  if (validValue !== input.value) {
    const cursorPos = input.selectionStart;
    input.value = validValue;
    const offset = validValue.length - input.value.length;
    input.setSelectionRange(cursorPos + offset, cursorPos + offset);
  }
  lastValidValue = validValue;
});

input.addEventListener("keydown", (event) => {
  if (event.key === "Backspace") {
    const value = input.value;
    const cursorPos = input.selectionStart;
    
    // 退格删除分隔符的逻辑优化
    if (value.charAt(cursorPos - 1) === decimalSeparator) {
      const newValue = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
      input.value = newValue;
      lastValidValue = newValue;
      input.setSelectionRange(cursorPos - 1, cursorPos - 1);
      event.preventDefault();
    }
  }
});

修复说明 #

• 自动补充分隔符：无论用户是输入到5位整数，还是退格回到5位整数状态，都会自动添加分隔符，直接进入小数输入模式。
• 光标连贯性：自动添加分隔符后调整光标位置，避免光标突然跳到末尾，保持输入流畅性。
• 异常处理：提前过滤非法字符，处理多个分隔符的错误输入，确保输入始终符合格式要求。
• 退格逻辑优化：仅在分隔符后无小数内容时，退格才会删除分隔符，减少误操作。

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