主流电商后端要求地址表单name字段为：receiver（或consignee）、mobile（或phone）、province、city、district、address、zipcode，必须与api约定严格一致，否则提交后字段丢失或解析失败。
地址表单必须包含哪些 name 字段才能被主流电商后端识别
国内主流电商（淘宝、京东、拼多多 API 及多数自建订单系统）对收货地址字段有强约定，name 值写错会导致提交后字段丢失或解析失败。别自己发明字段名。
-
name="receiver"或name="consignee"：收件人姓名（必填，后端常校验 2–10 个中文字符） -
name="mobile"或name="phone"：手机号，优先用mobile（部分系统会自动触发短信验证） -
name="province"、name="city"、name="district"：三级行政区划，必须是下拉选择（不能纯文本输入），值为标准行政编码（如"110000"）或中文全称（需与后端字典严格一致） -
name="address"：详细地址（街道+门牌号），最大长度建议限制在 100 字符内，避免后端截断 -
name="zipcode"：邮编，非必填但建议保留，部分物流系统依赖它做区域分拣
省市区三级联动为什么总卡在第二级（城市选不了）
常见原因是前端没处理好异步加载的时序问题：城市列表依赖省份 ID，但 change 事件触发时，接口还没返回数据，就直接渲染了空选项。
- 确保省份
<select></select>的change事件回调里，先清空城市下拉框（innerHTML = ""），再发请求，避免残留旧选项 - 城市
<select></select>必须设置disabled属性，直到接口返回成功后再移除——否则用户可能提前点选，触发无效提交 - 用浏览器开发者工具检查 Network，确认请求 URL 是否带了正确参数（如
?province=310000），且响应是标准 JSON 数组（不是 HTML 或带 BOM 的文本） - 不要用
innerHTML +=拼选项，改用document.createElement+appendChild，避免 XSS 风险（尤其当地址数据来自用户输入时）
autocomplete 属性怎么设才真有用
浏览器自动填充地址依赖 autocomplete 值是否符合 WHATWG 规范，设成 "off" 或乱写等于放弃这个功能。
- 收件人姓名：
autocomplete="name" - 手机号：
autocomplete="tel"（不是"phone"） - 省：
autocomplete="address-level1" - 市：
autocomplete="address-level2" - 区/县：
autocomplete="address-level3" - 详细地址：
autocomplete="street-address" - 邮编：
autocomplete="postal-code"
注意：address-level1/2/3 在 Safari 和 Chrome 上支持较好，Firefox 对 level3 支持弱，可降级为 address-line2 兜底。
移动端键盘弹出后地址输入框被遮挡怎么办
iOS Safari 和部分安卓 WebView 下，<input> 聚焦时页面不会自动滚动到焦点位置，导致输入框被软键盘盖住。
- 监听
focus事件，在 300ms 后强制滚动：el.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 避免给表单容器设
overflow: hidden或height: 100vh，这会阻止浏览器自动调整视口 - 不要用
position: fixed包裹整个表单——iOS 下 fixed 元素在键盘弹起时定位会异常 - 测试重点机型：iPhone 12/14（iOS 16+）、华为 Mate 50（HarmonyOS 3）、小米 13（MIUI 14），不同系统 WebKit 行为差异大
地址表单看似简单，但跨终端兼容性陷阱集中在三级联动时序、autocomplete 值大小写、以及 iOS 键盘与 scrollIntoView 的竞态上——这些地方一错，用户就在最后一步弃单。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
