如何在浏览器中触发已保存密码的自动填充功能？

Question

我有一个纯JavaScript编写的Web应用程序（除了加载所有JS文件的文档之外，没有预生成的HTML）。

这个应用程序包含一个登录表单，该表单在document.ready事件触发时动态创建。我通过将登录表单发布到隐藏的iframe中，在使用ajax进行登录之前欺骗浏览器显示“记住密码？”对话框（在Firefox中，密码出现在保存的密码列表中，因此这部分显然有效），但是保存的密码在以后再次加载登录屏幕后从未被填充。在Firefox和Safari中都会发生相同的情况。

是否有什么方法或可以调用的函数来触发自动填充？

更新：自动填充在Safari的初始页面加载中有效，但当用户注销并重新创建登录表单而无需重新加载页面时，它就无效了。在Firefox中永远不起作用。

- Aleksander Kmetec

Answer 1

除了将表单元素包装在 form 元素中之外，还要确保所有输入（甚至表单本身）都具有唯一的 name 和 id 属性，且不会更改。名称应该是一些描述性的东西，例如密码等的 password，不确定浏览器使用这些信息的程度，但如果您使用标准名称，则“自动建议”/“魔法棒”功能可能会更好地工作。

当然，您还应确保没有将 autosuggest/autofill 属性设置为 false（如果您正在使用任何 js 框架，则该框架可能出于某种原因这样做）。

第三种可能性是，在您的脚本加载并将表单写入页面之前，某些浏览器可能会自动填充，请尝试制作一个静态 html 版本的表单，看看是否可以解决问题。

最简单的解决方案（如果静态表单可行）是在注销时强制重新加载页面（您可能确实希望在注销后放弃运行 javascript 的“状态”，因此刷新确实是一件好事）。

- Stein G. Strindhaug

---

你可以在页面上始终拥有登录表单，直到文档准备好后再隐藏它。 - gnarf

在Safari和Chrome中，注销后重新加载页面确实可以使自动填充功能正常工作。不过，Firefox可能需要一个静态登录页面，而我一直在努力避免这种情况。 - Aleksander Kmetec

Answer 2

一些浏览器需要“form”标签才能启用本地用户名和密码存储。在我的 AJAX 应用程序中也遇到了同样的问题，我只需添加以下代码即可：

<form>...</form>

标签。

- Andrew Bashtannik

Answer 3

你不能使用类似的技巧 - 使用 iframe 加载表单，然后当登录表单提交时，实际上提交 iframe 表单，其中将包含保存的密码。

为了使“密码”出现在可见表单中，我认为您可以测量 iframe 表单中密码的长度，然后使用相同数量的 * 填充可见表单的密码字段。

- wheresrhys