chrome 浏览器在自动填充保存的 10 位手机号时，常错误添加前导零（如 1234567899 → 01234567899），根本原因是浏览器未识别输入字段的有效长度约束；通过显式设置 maxlength="10" 可强制限制输入长度，从而阻止非法前导零注入。
chrome 浏览器在自动填充保存的 10 位手机号时，常错误添加前导零（如 1234567899 → 01234567899），根本原因是浏览器未识别输入字段的有效长度约束；通过显式设置 maxlength="10" 可强制限制输入长度，从而阻止非法前导零注入。
该问题并非数据存储错误，而是 Chrome 自动填充引擎在缺乏明确长度提示时，对数字型输入字段的启发式解析偏差所致。当用户在 Chrome 设置中保存形如 1234567899 的 10 位号码后，浏览器可能将其与带国家代码（如印度 +91）或区域拨号习惯混淆，进而在填充时擅自补零。
核心解决方法：为电话输入框声明严格长度限制
在 HTML 中，必须为 标签显式添加 maxlength="10" 属性（注意：仅 pattern 或 min/max 无效，maxlength 是 Chrome autofill 唯一可靠识别的长度约束）：
<!-- ✅ 正确：强制限制为 10 字符，Chrome autofill 将严格遵守 -->
<input type="tel" name="phone" id="phone" autocomplete="tel" maxlength="10" placeholder="请输入10位手机号"><!-- ❌ 错误示例（无法阻止前导零） --><input type="tel" autocomplete="tel" pattern="[0-9]{10}"><input type="tel" autocomplete="tel" min="1000000000" max="9999999999">
⚠️ 注意事项：
- maxlength 必须为纯数字字符串（如 "10"），不可使用动态表达式（如 React 中的 {10} 需确保最终渲染为 maxlength="10"）；
- type="tel" 与 autocomplete="tel" 属性需同时存在，以确保浏览器正确识别语义；
- 若项目使用前端框架（如 React/Vue），请验证 DOM 实际输出是否包含 maxlength="10"（可通过浏览器开发者工具检查）；
- 此方案不影响手动输入或粘贴——超长内容将被截断，符合预期交互逻辑。
补充建议（增强健壮性）
除 maxlength 外，可配合 JavaScript 进行二次校验，防止绕过 HTML 约束的异常输入：
document.getElementById('phone').addEventListener('input', function(e) {
// 移除所有非数字字符，并截取前10位
const cleaned = e.target.value.replace(/\D/g, '').slice(0, 10);
if (cleaned !== e.target.value.replace(/\D/g, '')) {
e.target.value = cleaned;
}
});
综上，maxlength="10" 是目前最轻量、兼容性最佳且无需服务端改造的解决方案。它直击 Chrome autofill 的行为机制——不是修复“bug”，而是通过标准属性向浏览器明确传达字段的业务边界，从而让自动填充真正“按需而填”。
