chrome 浏览器在自动填充 10 位手机号时，常错误添加前导零（如 1234567899 变为 01234567899），本文提供经验证的前端修复方案：通过严格限制输入长度，强制 chrome 尊重数字位数规则。
chrome 浏览器在自动填充 10 位手机号时，常错误添加前导零（如 1234567899 变为 01234567899），本文提供经验证的前端修复方案：通过严格限制输入长度，强制 chrome 尊重数字位数规则。
该问题并非数据存储错误，而是 Chrome 自动填充引擎在解析保存的电话号码时，尝试“补全”格式（例如误判为带国家码或区号的号码），导致在无明确长度约束的 字段中插入冗余前导零。尤其在使用 Chrome 地址/联系人自动填充功能时（如在设置中新增地址并保存 1234567899），后续表单提交极易触发此异常。
根本解决方式是显式声明输入字段的最大长度：Chrome 的 autofill 机制会主动读取 maxlength 属性，并据此裁剪或校验填充内容。当字段被明确限定为 10 位时，浏览器将自动舍弃超出部分（包括非法前导零），确保填充结果严格符合预期。
✅ 正确实现示例（HTML / React 均适用）：
<!-- 原始易出错写法（无 maxlength） --> <input type="tel" name="phone" autocomplete="tel"><!-- ✅ 推荐修复写法 --><input type="tel" name="phone" autocomplete="tel" maxlength="10">
// React 中同理（注意属性命名规范）
<input type="tel" name="phone" autocomplete="tel" maxlength="{10}" react>
⚠️ 注意事项：
- 仅设置 pattern="[0-9]{10}" 或 minLength="10" 无效——Chrome autofill 不响应正则或最小长度约束；
- type="tel" 本身不触发长度限制，必须配合 maxlength；
- 若后端需兼容国际号码（如 +86 开头），建议前端统一做格式化（如用 inputmode="numeric" + JavaScript 校验），而非依赖 autofill 自动处理；
- 测试时请清除 Chrome 自动填充缓存：进入 chrome://settings/addresses → 删除对应地址条目，再重新保存 10 位号码以验证效果。
总结：这不是浏览器 Bug，而是 autofill 对松散字段的默认行为。通过 maxlength="10" 这一轻量级、无侵入性的声明式约束，即可精准控制填充输出，兼顾兼容性与用户体验，是当前最可靠、最广泛验证的生产级解决方案。
