Chrome 浏览器在自动填充 10 位手机号时可能错误添加前导零（如将 1234567899 填为 01234567899），本文提供简洁可靠的修复方案：通过 HTML maxlength 属性约束输入长度，强制 Chrome 尊重位数限制。
chrome 浏览器在自动填充 10 位手机号时可能错误添加前导零（如将 `1234567899` 填为 `01234567899`），本文提供简洁可靠的修复方案：通过 html `maxlength` 属性约束输入长度，强制 chrome 尊重位数限制。
在 Web 表单开发中，Chrome 的地址/联系方式自动填充功能虽提升用户体验，但对纯数字手机号（尤其中国大陆 10 位或 11 位）存在一个广为人知的兼容性问题：当用户在 Chrome 设置中保存了形如 1234567899 的 10 位号码后，浏览器在 autofill 时可能错误地补上一个前导零，导致输入框显示 01234567899（共 11 位）。该行为并非标准规范，而是 Chrome 内部解析逻辑对“电话号码”类型字段的启发式处理所致——它可能将输入误判为需补零的区域编码格式。
根本解决方式是显式声明长度约束：为电话号码 元素添加 maxlength="10" 属性（HTML）或 maxLength={10}（React JSX）。此举向浏览器明确传达“该字段仅接受最多 10 个字符”，从而覆盖其默认的宽松填充策略。
✅ 正确示例（HTML）：
<input type="tel" name="phone" id="phone" autocomplete="tel" maxlength="10" placeholder="请输入10位手机号">
✅ 正确示例（React）：
<input type="tel" name="phone" autocomplete="tel" maxlength="{10}" placeholder="请输入10位手机号">
⚠️ 注意事项：
- maxlength 必须与实际业务要求严格一致（如中国标准手机号为 11 位，则设为 11；若系统仅接受 10 位虚拟号或旧号段，请设为 10）；
- 不要依赖 pattern 或 JavaScript 截断来“事后修正”，因为 autofill 发生在 DOM 渲染早期，JS 监听可能滞后，导致用户短暂看到错误值；
- 避免同时使用 inputmode="numeric" + type="text" 组合，这可能加剧 Chrome 对数字前导零的误判；推荐统一使用 type="tel" 配合 maxlength；
- 该方案兼容所有现代 Chrome 版本（v80+），无需 polyfill 或 UA 检测。
总结：Chrome autofill 的前导零问题本质是浏览器对无长度约束的 tel 字段的过度“智能”补全。添加 maxlength 是最轻量、最可靠、符合 Web 标准的防御性写法——它不修改用户数据，不增加运行时负担，仅用一行声明即可让自动填充回归预期行为。建议所有涉及固定位数电话输入的表单均采用此实践。
