ajax - 如何让浏览器提示保存密码？

Question

嘿，我正在开发一个 Web 应用程序，它有一个登录对话框，其工作原理如下:

1. 用户点击“登录”
2. 登录表单 HTML 通过 AJAX 加载并显示在页面上的 DIV 中
3. 用户在字段中输入用户名/密码并单击“提交”。这不是<form> -- 用户/密码通过 AJAX 提交
4. 如果用户/密码正常，页面会在用户登录的情况下重新加载。
5. 如果用户/密码错误，页面不会重新加载，但 DIV 中会显示错误消息，用户可以重试。

问题在于:浏览器永远不会像其他网站那样提供常见的“保存此密码？是/从不/不现在”提示。

我尝试包装 <div>在<form>带有“autocomplete='on'”的标签，但这没有什么区别。

是否可以让浏览器提供存储密码的功能，而无需对登录流程进行重大修改？

谢谢 埃里克

附:添加到我的问题，我肯定正在使用存储密码的浏览器，并且我从未单击过“从不用于此站点”...这是浏览器未检测到它是登录表单而不是运算符(operator)的技术问题错误:-)

Answer 1

我找到了这个问题的完整解决方案。 (我已经在 Chrome 27 和 Firefox 21 中对此进行了测试)。

有两件事需要知道:

1. 触发“保存密码”，并且
2. 恢复保存的用户名/密码

1。触发“保存密码”:

对于 Firefox 21，当检测到存在包含输入文本字段和输入密码字段的表单提交时，会触发“保存密码”。所以我们只需要使用

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin() 执行 ajax 登录并重新加载/重定向到登录页面，而 event.preventDefault() 由于提交表单而阻止原始重定向。

如果你只使用 Firefox，上述解决方案就足够了，但在 Chrome 27 中不起作用。然后你会问如何在 Chrome 27 中触发“保存密码”。

对于Chrome 27，通过提交包含输入文本字段的表单重定向到页面后会触发“保存密码” 属性名称='用户名'和输入密码字段属性名称='密码'。因此，我们不能因为提交表单而阻止重定向，但我们可以在完成ajax登录后进行重定向。 (如果你想让ajax登录不重新加载页面或者不重定向到某个页面，不幸的是，我的解决方案不起作用。)然后，我们可以使用

<form id='loginForm' action='signedIn.xxx' method='post'>
    <input type='text' name='username'>
    <input type='password' name='password'>
    <button id='loginButton' type='button'>Login</button>
</form>
<script>
    $('#loginButton').click(someFunctionForLogin);
    function someFunctionForLogin(){
        if(/*ajax login success*/) {
            $('#loginForm').submit();
        }
        else {
            //do something to show login fail(e.g. display fail messages)
        }
    }
</script>

带有 type='button' 的按钮将使单击按钮时不提交表单。 然后，将一个函数绑定(bind)到用于ajax登录的按钮。最后，调用 $('#loginForm').submit(); 重定向到登录页面。如果登录页面是当前页面，则可以将“signedIn.xxx”替换为当前页面来进行“刷新”。

现在，您会发现 Chrome 27 的方法在 Firefox 21 中也适用。所以最好使用它。

2.恢复保存的用户名/密码:

如果您已经将登录表单硬编码为 HTML，那么您将发现恢复登录表单中保存的密码没有问题。
但是，如果使用js/jquery动态制作loginForm，则保存的用户名/密码不会绑定(bind)到loginForm，因为保存的用户名/密码仅在文档加载时绑定(bind)。
因此，您需要将登录表单硬编码为 HTML，并使用 js/jquery 动态移动/显示/隐藏登录表单。

<小时/>

备注: 如果您使用ajax登录，请勿在标签形式中添加autocomplete='off'，例如

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' 将使将用户名/密码恢复到登录表单失败，因为您不允许它“自动完成”用户名/密码。