HTML5 autocomplete属性通过shipping前缀语义化标签实现收货地址自动填充，需按姓名、手机、省、市、详细地址、邮编顺序书写字段，确保在form内且避免autocomplete="off"、type="number"等失效陷阱。

HTML5 的 autocomplete 属性能让浏览器根据用户本地保存的地址信息，自动填充收货地址字段，省去手动逐字输入的过程。它不依赖 JavaScript，而是靠语义化标签触发原生能力，效果直接、轻量、兼容性好。

用对 shipping 前缀，避免填错地址类型

浏览器默认可能优先填充“账单地址”，但收货地址需要明确区分。必须在所有相关字段加上 shipping 前缀：

• 收货人姓名：autocomplete="shipping name"
• 手机号：autocomplete="shipping tel"
• 省：autocomplete="shipping address-level1"
• 市：autocomplete="shipping address-level2"
• 详细地址：autocomplete="shipping street-address"（单行）或拆为 address-line1 / address-line2
• 邮编：autocomplete="shipping postal-code"
• 国家：autocomplete="shipping country"

漏掉 shipping 或写成 billing、delivery 等非标准前缀，浏览器大概率跳过填充或填错内容。

字段顺序要贴近真实地址逻辑

浏览器按 DOM 顺序匹配已存地址结构。推荐按以下顺序组织 input 元素：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 收货人姓名
• 手机号
• 省（address-level1）
• 市（address-level2）
• 区/县（address-level3，国内可选，无则跳过）
• 详细地址（street-address）
• 邮编（postal-code）

中间某一级缺失时，直接省略该字段，不要留空 input——否则会干扰匹配逻辑。

避开常见失效陷阱

即使代码写对，以下情况也会让自动填充“静音”：

• 表单不在
  标签内——autocomplete 只对 form 内部的 input 生效
• 写了 autocomplete="off" 或父级容器带该属性——现代浏览器虽部分忽略，但仍建议彻底移除
• 邮编字段用了 type="number"——Chrome 会禁用自动填充，改用 type="text" 或 type="tel"
• 地址用 而非 ——textarea 不支持任何地址类 autocomplete 值
• 字段是 JS 动态插入的，且用户在 DOM 渲染完成前就点击——需确保 input 已挂载并可聚焦

兼顾中文用户实际使用习惯

国内多数用户未在浏览器中手动保存完整中文地址，所以即使代码全对，首次可能无反应。可做轻量优化：

• 关键字段旁加简短提示，如 placeholder="常用手机号，用于物流通知"
• 省市区下拉用 ，并为每个 option 设置 value 和对应语义（如省选项 value="广东省"，配合 autocomplete="shipping address-level1"）
• 提交前用 JS 检查必填项是否为空，但不要拦截 autocomplete 自动填入的过程
• 移动端 Safari 对 address-level2 支持偏弱，可额外加 name="city" 提升识别率

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！