技术需求：编写脚本实现ZIP-Code范围判断并实时填充邮箱

嘿，这需求很清晰，直接用原生JavaScript就能实现实时的ZIP码校验和邮箱填充功能，我给你写好完整代码，再一步步解释清楚：

完整代码示例 #

<!-- HTML部分 -->
<input type="text" id="zip" placeholder="输入ZIP码">
<input type="text" id="mail" placeholder="自动填充邮箱" readonly>

<script>
// JavaScript部分
const zipInput = document.getElementById('zip');
const mailInput = document.getElementById('mail');

// 监听输入事件，实时处理
zipInput.addEventListener('input', function() {
  // 获取输入值并转为整数，处理空值情况
  const zipCode = parseInt(this.value.trim(), 10);
  
  // 初始化邮箱为空
  let targetMail = '';
  
  // 区间判断逻辑
  if (!isNaN(zipCode)) {
    if (zipCode >= 0 && zipCode <= 59999) {
      targetMail = 'first@mail.de';
    } else if (zipCode >= 60000 && zipCode <= 72999) {
      targetMail = 'second@mail.de';
    } else if (zipCode >= 73000 && zipCode <= 76999) {
      targetMail = 'third@mail.de';
    }
    // 其他区间可以在这里扩展，比如加else处理超出范围的情况
  }
  
  // 给邮箱输入框赋值
  mailInput.value = targetMail;
});
</script>

代码细节解释 #

• 事件监听：用input事件而不是keyup，因为它能覆盖所有输入场景（比如鼠标粘贴、右键菜单粘贴、输入法输入等），保证实时响应更全面。
• 值处理：先用trim()去掉前后空格，再用parseInt转成整数，同时用isNaN判断是否为有效数字——如果用户输入字母、符号这类非数字内容，邮箱会自动清空，避免错误赋值。
• 区间判断：用清晰的if-else分支对应每个ZIP码区间，逻辑一目了然，后续要加新区间也很方便。
• 邮箱输入框只读：给mail输入框加了readonly属性，防止用户手动修改自动填充的邮箱，当然如果需求允许用户修改，去掉这个属性就行。

额外优化建议 #

如果需要给用户提示超出范围的情况，可以在最后加个else分支：

} else {
  targetMail = '无效ZIP码，请输入正确范围';
}

这样用户输入不在指定区间的数字时，能得到明确提示。

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