清空input自动填充历史需重置autocomplete上下文而非仅清空value。核心方法是临时修改name属性触发浏览器识别为新字段，辅以autocomplete="off"切换、type="search"时清空datalist或替换dom元素，并在初始化阶段使用模糊name名阻断历史积累。
点击按钮时清空 input 的浏览器自动填充历史（autocomplete cache）
浏览器对 <input autocomplete="on"> 的历史记录不提供 JS 直接清除的 API，所谓“清空历史”实际是指让浏览器停止对该字段展示下拉建议。这不是清空本地值，而是重置其 autocomplete 上下文。
常见错误是只设 value = "" 或 input.value = ""——这只能清空当前值，不影响下次聚焦时的下拉菜单。
- 给目标
<input>添加唯一name和id，例如name="user_email" - 在按钮点击后，用 JS 临时修改
name属性（如加时间戳），再立即恢复，触发浏览器认为这是“新字段” - 配合
autocomplete="off"不可靠（Chrome 88+ 忽略），但可作为辅助：先设为"off"，再短暂切回"email"等语义值
type="search" 输入框的 history 清除更简单
如果是 <input type="search">，它使用的是浏览器内置的搜索历史（非表单 autofill），可通过 search 事件 + input.list 操作，但真正有效的办法是重置其关联的 <datalist></datalist> 或直接清空 DOM 后重建。
- 若用了
<input list="mylist"><datalist id="mylist">...</datalist>，清空按钮只需执行：document.getElementById('mylist').innerHTML = ''; - 不依赖
datalist时，type="search"的历史无法用 JS 删除，但可绕过：将该 input 的name改为随机字符串（如"search_" + Date.now()），再克隆替换原元素 - 注意：Safari 对
type="search"的 history 控制最弱，基本无 API，只能靠换名规避
防止历史重新积累的隐藏配置
清空只是临时手段；若不阻断后续记录，点一次按钮后几次输入又会恢复下拉。关键在初始化阶段切断源头。
- 服务端渲染或首次加载时，避免写死
name="email"这类高匹配字段名，改用模糊名如name="usr_contact" - 不要用
autocomplete="email"，改用autocomplete="off"+autocapitalize="none"+spellcheck="false"组合压制 - 对敏感字段（如密码重置邮箱），可在聚焦时动态生成
name和id，失去上下文后浏览器无法关联历史
移动端 Safari 的特殊处理
iOS Safari 对 autocomplete 历史更顽固，即使换 name 也可能复现。此时必须结合 DOM 替换和 focus 状态干预。
- 清空按钮逻辑中，先
blur()当前 input，再移除并重建整个<input>元素（保留value为空） - 重建后，延迟
setTimeout(() => input.focus(), 10)避免 Safari 在 DOM 替换瞬间仍抓取旧上下文 - 测试发现，仅设置
autocomplete="new-password"对普通文本框也有效——Safari 会将其视为密码字段而禁用历史提示
name + type + 页面路径三元组上。换掉其中任一，历史就失效；但只要用户再次输入并提交成功，新组合又会立刻开始积累。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
