输入框字符串强制格式化：指定位置加短横线及超长内容处理

需求明确：最终输出24位格式，结构为 XX-XXXX-XXXXXXXX-XXX（X为字母/数字），短横线固定在第3、8、17位字符位置。以下是修正后的实现方案：

const caseNumberInput = document.querySelector(".theme--mobile #case_number");

// 核心格式化函数：处理有效字符并拼接成指定格式
function formatCaseNumber(inputStr) {
  // 提取所有字母数字，转大写，只保留前21位有效字符
  const validChars = inputStr.replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, 21);
  // 按规则拆分并插入短横线
  return [
    validChars.slice(0, 2),    // 前2位
    validChars.slice(2, 6),    // 接下来4位
    validChars.slice(6, 14),   // 接下来8位
    validChars.slice(14)       // 剩余的7位（21-2-4-8=7）
  ].join("-");
}

// 输入框失去焦点时统一格式化
caseNumberInput.addEventListener("blur", (e) => {
  e.target.value = formatCaseNumber(e.target.value);
});

// 实时过滤非法字符，只允许字母、数字、短横线，同时转大写
caseNumberInput.addEventListener('keyup', (e) => {
  e.target.value = e.target.value.toUpperCase().replace(/[^a-zA-Z0-9 -]/g, "");
});

关键说明 #

1. 统一处理逻辑：不管用户输入的有效字符是刚好21位还是超过21位，都先提取前21位有效字符，再统一应用格式化规则，避免重复判断逻辑。
2. 事件分工清晰：keyup只做实时过滤和转大写，不插入短横线——这样用户输入时不会被频繁插入的符号打断；blur时再统一格式化，保证最终输出符合要求。
3. 修复原代码问题：
   • 原代码中两个if分支（length === 21和length >= 21）会重复执行，导致逻辑冲突；
   • length >= 21分支里存在未定义的temp变量，且拼接后的字符串未赋值，格式化不生效；
   • 重复执行正则替换，代码冗余。

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