表单字段如何自动填充用户历史数据
浏览器原生支持通过 autocomplete 属性触发历史数据填充，但必须匹配标准值（如 "name"、"email"、"tel"），填错就完全不生效。
-
autocomplete值必须是 W3C 规范定义的关键词，比如地址字段用"street-address"，不是"address"或"addr" - 同名字段（如多个
type="text"）需靠name或id区分，否则浏览器可能填错位置 - 动态渲染的表单（如 React/Vue 组件挂载后插入 input）要等 DOM 真实存在再设置
autocomplete，过早设置会被忽略 - Chrome 对
autocomplete="off"已基本无视，强行禁用历史填充不可靠；真要禁用，得用autocomplete="new-password"这类欺骗值
JavaScript 读取已保存的表单数据行不行
不行。浏览器禁止 JavaScript 读取 autofill 数据，这是明确的安全限制——input.value 在页面加载时为空，用户未手动输入或点击下拉选项前，JS 拿不到任何历史值。
- 监听
input或change事件才能捕获用户选择后的值，不能“预读” - 部分浏览器在
DOMContentLoaded后短暂延迟（几十毫秒）会同步 autofill 内容，但时机不可靠，不能依赖 - 想做预填充（比如从 localStorage 恢复），必须自己存、自己取，和浏览器 autofill 是两套机制
表单提交后如何保留用户刚填的内容
提交失败时保留数据最稳妥的方式是服务端渲染回填，而不是靠前端 JS 缓存——因为 JS 可能被禁用、刷新即丢、多标签页冲突。
- 后端模板（如 Django/Jinja/Thymeleaf）直接把请求参数塞进对应字段的
value或checked属性里 - 如果走纯前端提交，可在
fetch失败后遍历表单元素，用form.elements[i].value = formData.get(...)手动恢复 - 避免用
localStorage.setItem("form", JSON.stringify(form))全量缓存：密码字段不该存、文件 input 无法序列化、中文/特殊字符易出编码问题
移动端键盘弹出时表单被遮挡怎么办
这不是历史数据问题，但常被一起遇到：iOS Safari 和部分安卓 WebView 在键盘弹起时不会自动滚动聚焦字段到可视区，导致用户看不到自己填了什么。
立即学习“前端免费学习笔记（深入）”；
- 给
input绑定focus事件，用el.scrollIntoView({ behavior: "smooth", block: "center" })强制滚动 - 避免对整个
form设置height: 100vh，这会让 iOS 认为页面不可滚动，键盘顶起时内容直接被切掉 - 测试时务必用真机，模拟器的 viewport 行为和真实设备差异很大
