layui如何取消输入框的自动填充

autocomplete="off"在Chrome和Safari中常失效，因浏览器忽略该值；应移除父级autocomplete="off"、设置标准语义值（如username）、插入隐藏域欺骗填充。

直接在 input 上加 autocomplete="off" 大概率无效，尤其在 Chrome 和 Safari 中；真正起效的方式是组合使用标准 autocomplete 值 + 移除父级干扰 + 隐藏域欺骗。

为什么 autocomplete="off" 经常失效

Chrome 从 2024 年起就无视大部分 autocomplete="off"，Safari 更严格——它只认语义化值（如 username、new-password），对 off 当作非法值直接忽略。更麻烦的是，有些后台模板会全局给 <form> 加 autocomplete="off"，这会直接压制所有子元素的设置。

精准关闭自动填充的三步操作

不是“关掉”，而是“骗过”浏览器的自动填充逻辑：

1. 检查并移除父级 <form autocomplete="off">，改成 autocomplete="false" 或直接删掉该属性
2. 给目标 <input> 设置标准语义值，例如：name="username" 对应 autocomplete="username"；name="password" 对应 autocomplete="current-password" —— 浏览器看到标准值才可能启用/禁用逻辑，乱写 off 或 nope 没用
3. 若仍被填充（常见于密码框连带填充上一个文本框），在表单最开头插入两个隐藏域：<input type="text" name="hidden-autofill-1" style="display:none;"> 和 <input type="password" name="hidden-autofill-2" style="display:none;">，让浏览器“填错位置”

移动端 Safari 的特殊要求

Safari 的键盘建议栏只响应同时满足以下条件的 <input>：

1. 必须有 name 属性（不能只靠 id）
2. autocomplete 值必须是标准枚举（如 email、tel、postal-code），不能是 on、off 或自定义字符串
3. 不能被 Layui 包裹后丢失原生 <input> 标签（Layui 2.8+ 一般只装饰不替换，但需用 DevTools 确认 DOM 中仍有原始 <input name="xxx">）

清空已填充内容并阻止后续填充

如果页面加载后输入框已被填充，且你想立刻清除并防止再填：

1. 用 JS 在 DOMContentLoaded 后执行：input.value = '' + input.dispatchEvent(new Event('input'))，触发 Layui 表单同步
2. 配合 CSS 清除 WebKit 自动填充背景：input:-webkit-autofill { background: transparent !important; }（注意要加 !important）
3. 避免在 form.on('submit') 回调里写 return false 来“拦截填充”——那只是阻止提交，和自动填充无关

真正难处理的不是“怎么关”，而是“关了之后浏览器还坚持填”。这时候得接受：你无法 100% 强制禁用，只能通过语义化 + 结构欺骗 + 清理时机来大幅降低命中率。尤其密码类字段，浏览器会主动干预，硬刚不如顺势引导用户用密码管理器的标准流程。