chrome 浏览器在自动填充保存的 10 位手机号时，可能错误地补上首位“0”，导致号码变为 11 位（如 01234567899）；通过为输入框设置 maxlength="10" 可强制约束长度，有效阻止该异常行为。
chrome 浏览器在自动填充保存的 10 位手机号时，可能错误地补上首位“0”，导致号码变为 11 位（如 01234567899）；通过为输入框设置 maxlength="10" 可强制约束长度，有效阻止该异常行为。
该问题并非数据存储错误，而是 Chrome 自动填充引擎在解析和渲染保存的电话号码时，对格式缺乏严格校验所导致的显示异常。尤其当用户在 Chrome 地址/支付资料中录入类似 1234567899 的纯数字 10 位号码后，浏览器在后续表单 autofill 过程中可能误判其为需补零的区域号格式（例如模拟国际拨号前缀），从而注入冗余的前导零。
根本解决方式是显式声明输入长度限制：在 HTML 表单的电话输入框中添加 maxlength="10" 属性（HTML 标准属性），或在 React 等框架中使用 maxLength={10}（注意大小写）。Chrome 会将其视为硬性约束，并在 autofill 阶段主动截断或规避超长填充行为。
示例代码如下：
<!-- 原始易出错写法 --> <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}" onchange="{handlePhoneChange}">
⚠️ 注意事项：
- maxlength 仅控制用户可输入的最大字符数，但 Chrome autofill 会尊重该属性并调整填充逻辑——这是目前最轻量、兼容性最佳的方案；
- 不要依赖 pattern 或 JavaScript 截断（如 e.target.value.slice(0,10)），因 autofill 发生在 DOM 渲染前，JS 监听可能滞后；
- 避免使用 type="number" 替代 type="tel"，前者会禁用移动端电话键盘且可能触发科学计数法转换；
- 若业务需支持国际号码（含 +86 等前缀），应改用独立国家代码字段 + 号码字段组合，并分别设置 maxlength（如号码字段仍设为 10），而非强行统一处理。
总结：该问题本质是浏览器 autofill 的启发式行为与本地号码格式预期不一致所致。添加 maxlength="10" 是经过验证的、无需后端修改、零侵入性的标准解法，适用于所有现代 Chrome 版本（v90+），建议作为电话输入字段的默认防护措施。
