应使用 inputmode="numeric" + oninput 实时清洗：删非数字字符、截取前6位、保持光标位置；禁用 type="number"；避免 pattern/title 依赖；placeholder 和 CSS 视觉暗示替代自动分隔。
怎么用 input 实现带格式提示的邮编输入框
直接用 <input type="text" pattern="[0-9]{6}"> 只能做基础校验，用户输错或输多时没反馈，也不自动分隔。真正好用的邮编输入框得兼顾体验和有效性：国内 6 位、支持粘贴、允许空格/短横分隔、失焦时自动清理并校验。
关键不是“怎么加样式”，而是“怎么让输入过程不打断用户，又确保最终值合规”。推荐用 inputmode="numeric" + oninput 清洗，而不是依赖 pattern 或正则匹配 onBlur。
- 避免用
type="number"：会禁用中文输入法、允许负号和小数点，且移动端唤起数字键盘但无法输入空格 - 允许用户粘贴
"100086"、"100-086"、"100 086"，统一转成"100086" - 实时限制长度为 6 位数字，删掉非数字字符，但保留光标位置合理（需用
setSelectionRange微调）
如何用 JavaScript 清洗邮编输入值（兼容 PC 和手机）
重点不是“过滤”，是“容错清洗”：用户可能输错一位、多按一次空格、从 Excel 粘贴带换行的内容。靠 blur 校验太晚，应在 input 事件中响应。
下面这段逻辑足够轻量，不依赖框架，可直接塞进 <script>：
立即学习“前端免费学习笔记（深入）”；
const zipInput = document.querySelector('input[data-zip]');
zipInput.addEventListener('input', (e) => {
let v = e.target.value.replace(/\D/g, ''); // 删所有非数字
if (v.length > 6) v = v.slice(0, 6);
e.target.value = v;
});
- 不用
keypress：不触发粘贴、剪切、拖入等操作 - 不用
change：用户还没输完就提交表单会漏校验 - 别在
input里直接e.target.value = ...后不处理光标——Chrome 下光标会跳到末尾，影响连续编辑；如需精控，得记原始光标位置再恢复
为什么不能只靠 HTML5 的 pattern 和 title
pattern 是提交时才校验，对用户体验毫无帮助。用户输完 "12345"（少一位）、"1234567"（多一位）、"12a456"（含字母），页面不会提示，直到点提交按钮才弹红框——这已经晚了。
-
title提示文字在移动端基本不显示，iOS Safari 完全忽略 -
pattern错误信息不可定制，且无法区分“格式错”和“必填空” - 即使加上
required，用户仍可能输"000000"这种无效邮编，而pattern无法做业务级判断
真正要做的，是在输入过程中就收敛值，并在 blur 时补一层语义校验（比如查是否在已知有效号段内）。
要不要加自动分隔（如 "100 086"）？
加了反而增加出错概率。用户习惯不同：有人喜欢空格，有人手快多打一个，有人复制时带制表符。自动插入空格会干扰粘贴、破坏全选行为、导致移动端光标错位。
更稳妥的做法是「视觉暗示」而非「强制分隔」：
- 用
placeholder="100086"明确位数预期 - CSS 中用
letter-spacing或背景图模拟分隔感（不改变实际值） - 如果必须展示分隔，用只读伪元素（::after）叠加，但
value始终保持纯 6 位数字
复杂点在于：一旦开始做格式化，就得同时处理光标位置、撤销栈、粘贴事件、屏幕阅读器兼容性——这些细节比“实现功能”本身更耗时，且多数场景并不需要。
