原生自动补全需正确设置autocomplete语义值，如email、current-password等；密码字段须严格区分current-password与new-password；datalist仅用于自定义下拉建议，不替代浏览器自动填充。

input 元素开启原生自动补全要加 autocomplete 属性

浏览器不会默认对所有 <input> 自动触发建议下拉，必须显式设置 autocomplete 值。它不是开关，而是语义提示——告诉浏览器“这个输入框是用来填什么的”。填错值（比如用 autocomplete="name" 表示邮箱）会导致建议完全不出现或推荐错误内容。

常见可用值包括：name、email、tel、current-password、new-password、street-address、postal-code 等。W3C 有完整列表，但实际生效依赖浏览器实现，Chrome 和 Safari 对 email、password 类支持最稳定。

• autocomplete="off" 并不能可靠禁用自动填充，尤其在密码字段上常被浏览器忽略
• 动态生成的表单（如 Vue/React 渲染）需确保 autocomplete 在初始渲染时就存在，后期 JS 修改无效
• 避免用 autocomplete="false" 或 autocomplete="anything"，这些是非法值，等价于未设置

密码字段必须区分 current-password 和 new-password

这是最容易出问题的地方：登录页的密码输入框要用 current-password，注册或修改密码页的“新密码”框必须用 new-password。混用会导致浏览器拒绝保存、不触发密码管理器弹窗，甚至把旧密码错误填进新密码框。

更关键的是，new-password 还会触发浏览器内置的密码强度检测和生成建议（如 Chrome 的“建议强密码”按钮），而 current-password 不会。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 两个密码字段（如“确认新密码”）都应设为 autocomplete="new-password"，否则第二个框可能被填入随机字符串
• 若页面同时存在登录态和修改密码逻辑，务必通过 DOM 切换或条件渲染更新 autocomplete 值，不能复用同一 input 节点
• Safari 对 new-password 更敏感，未正确配对 type="password" 时直接忽略

自定义下拉建议（非原生）得靠 list + <datalist></datalist>

如果想提供固定词表（如城市名、型号列表），而不是依赖用户历史输入，就得用 list 属性关联 <datalist></datalist>。它和 autocomplete 无关，也不触发浏览器地址栏或密码管理器行为，纯粹是前端可控的关键词匹配。

注意 <datalist></datalist> 中的 <option></option> 只能有 value，不支持 label 或分组；匹配是前缀式、大小写敏感的，且不支持模糊搜索。

<input type="text" list="browsers"><datalist id="browsers"><option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option></datalist>

• list 的值必须严格匹配 <datalist></datalist> 的 id，拼写错误或空格会导致失效
• 移动端（尤其 iOS Safari）对 <datalist></datalist> 支持有限，部分机型只显示第一个匹配项或完全不显示
• 不能用 CSS 伪类（如 ::-webkit-list-box）可靠定制样式，下拉面板外观由系统控制

第三方自动填充工具（如 1Password）依赖正确语义和 DOM 结构

密码管理器不是靠 class 或 placeholder 识别字段，而是解析 autocomplete、name、type 和周围 label 文本。一个常见失败场景是：label 用 for 指向了错误的 input ID，或把 label 写在 input 外部又没绑定关系。

另外，某些框架（如 React）在表单提交后重置 input 的 value，但没同步清空 autocomplete 状态，导致下一次聚焦时仍尝试填充已过期的数据。

• 确保每个 input 都有明确、唯一的 id，且对应 label 的 for 属性一致
• 避免用 display: none 隐藏敏感字段再 show，管理器可能跳过不可见元素；改用 visibility: hidden 或移出视口
• 不要用 input.value = "" 后立即 focus，这会打断管理器的自动填充流程；延迟 10ms 再 focus 更稳妥

原生自动匹配不是“开了就能用”，它高度依赖语义准确性和 DOM 稳定性。最常被忽略的是：autocomplete 值写错、密码类型混淆、以及以为 datalist 能替代浏览器级填充——三者叠加，基本等于放弃自动建议。

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