Postcode输入框失焦后自动添加的空格消失问题求助

问题根源 #

空格消失大概率是页面表单在**失焦（blur）**时触发了内置的格式化/验证逻辑，自动移除了空格；同时原代码的keydown事件时机不对，容易出现判断误差（比如按键按下时输入值还未更新）。

修正后的代码 #

直接替换你原来的代码即可：

const input = document.querySelector(".input_postcode");
// 设置最大长度为7
input.maxLength = 7;

// 实时处理输入，确保空格正确添加
input.addEventListener('input', function() {
  // 先清除所有空格，避免重复添加或手动输入的干扰
  let cleanValue = this.value.replace(/\s/g, '');
  // 格式化：第4位后添加空格
  if (cleanValue.length > 4) {
    cleanValue = `${cleanValue.slice(0,4)} ${cleanValue.slice(4)}`;
  }
  // 仅当值变化时更新，避免循环触发
  if (cleanValue !== this.value) {
    this.value = cleanValue;
  }
});

// 失焦时强制保留格式化后的空格，对抗页面内置逻辑
input.addEventListener('blur', function() {
  let cleanValue = this.value.replace(/\s/g, '');
  if (cleanValue.length > 4) {
    this.value = `${cleanValue.slice(0,4)} ${cleanValue.slice(4)}`;
  } else {
    this.value = cleanValue;
  }
});

关键改进点 #

• 用input事件替代keydown：input事件在输入框值真正变化时触发，不会受按键类型（删除、方向键等）干扰，判断更准确。
• 先清除所有空格再格式化：避免用户手动输入空格或重复添加导致的格式混乱。
• 增加blur事件处理：强制在失焦时重新格式化，覆盖页面自带的空格移除逻辑。
• 原生JS直接设置maxLength：无需依赖jQuery，更轻量简洁。

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