autocomplete="cc-number" 仅标识字段用途，不直接触发填充；需配合form包裹、HTTPS、cc-exp/cc-name等完整支付上下文及type="tel"、inputmode="numeric"等属性才能启用浏览器自动填充。

autocomplete="cc-number" 本身不触发自动填充，它只是告诉浏览器“这个输入框用来填信用卡号”。能否真正填充，取决于浏览器是否识别出完整的支付上下文、用户是否保存过卡片、页面是否符合安全要求等条件。

必须满足的基础条件

浏览器只在严格符合规范的前提下才启用信用卡自动填充：

• 整个输入区域必须包裹在
  标签内，且 form 的 autocomplete 属性建议设为 on
• 页面必须通过 HTTPS 协议访问，HTTP 站点会被浏览器直接禁用敏感字段填充
• 不能单独使用 cc-number —— 至少要搭配 cc-exp（有效期）或 cc-name（持卡人姓名），否则浏览器无法确认这是完整支付流程
• 属性值必须是小写连字符格式：cc-number，写成 CCNumber、ccnumber、credit-card 都无效

关键配套属性不能少

光写 autocomplete="cc-number" 远不够，需组合以下属性才能提升识别率和体验：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• type="tel"：比 type="text" 更稳妥唤起数字键盘，又不像 type="number" 那样拦截空格和连字符
• inputmode="numeric"：明确指示移动端弹出纯数字键盘，iOS Safari 和安卓 Chrome 均支持良好
• pattern="[0-9\s]{13,19}"：限制仅允许数字与空格，辅助前端校验（注意：不替代后端验证）
• maxlength="19"：覆盖所有主流卡号长度（13–16 位+最多3个空格），防止超长输入
• placeholder="xxxx xxxx xxxx xxxx"：提供视觉格式引导，增强用户预期

容易被忽略的干扰项

这些做法看似合理，实则会破坏自动填充逻辑：

• 给 input 加 autocomplete="off" 或 autocomplete="false" —— 会覆盖 cc-number 的语义，直接禁用填充
• 用 type="number"：iOS Safari 会阻止空格输入，导致分组显示（如 4242 4242…）失效，也影响浏览器对字段用途的判断
• 动态插入 input 元素但未同步设置 autocomplete 属性 —— 浏览器扫描表单时可能漏掉该字段
• cc-exp 字段写成 autocomplete="exp" 或 autocomplete="card-expiry" —— 必须用标准值 cc-exp 才能构成上下文

移动端特别注意事项

在手机上，自动填充行为更依赖输入方式与上下文完整性：

• 务必同时设置 inputmode="numeric" 和 autocomplete="cc-number"，缺一不可；部分安卓浏览器只认组合生效
• 避免使用 inputmode="decimal"（带小数点）或 inputmode="tel"（可能唤出 *# 键），它们都不适合卡号
• 加 autocapitalize="off" autocorrect="off" 可减少 iOS 键盘自动修正干扰，但不是填充前提
• 不要依赖 maxlength 或 pattern 来“阻止”非数字字符 —— 它们只做提示和基础过滤，真正的卡号校验应交由 JS（如 Luhn 算法）和后端完成