我找到了这个问题的完整解决方案。 (我已经在 Chrome 27 和 Firefox 21 中对此进行了测试)。
有两件事要知道:
- 触发“保存密码”,然后
- 恢复保存的用户名/密码
1。触发“保存密码”:
对于 Firefox 21,当检测到有一个包含输入文本字段的表单并提交了输入密码字段时,会触发“保存密码”。所以我们只需要使用
$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin() 执行 ajax 登录并重新加载/重定向到登录页面,而 event.preventDefault() 由于提交表单而阻止原始重定向。
如果你只处理火狐,上面的解决方案就足够了,但在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' 的Button 将使单击该按钮时不提交表单。
然后,将函数绑定到 ajax 登录按钮。最后,调用$('#loginForm').submit(); 会重定向到登录页面。如果登录页面是当前页面,则可以将'signedIn.xxx'替换为当前页面以进行'刷新'。
现在,你会发现 Chrome 27 的方法在 Firefox 21 中也可以使用,所以最好还是使用它。
2。恢复保存的用户名/密码:
如果您已经将 loginForm 硬编码为 HTML,那么您将发现在 loginForm 中恢复保存的密码没有问题。
但是,如果您使用js/jquery动态制作loginForm,则保存的用户名/密码不会绑定到loginForm,因为保存的用户名/密码只有在文档加载时才会绑定。
因此,您需要将 loginForm 硬编码为 HTML,并使用 js/jquery 动态移动/显示/隐藏 loginForm。
备注:
如果你做ajax登录,不要在标签形式中添加autocomplete='off'
<form id='loginForm' action='signedIn.xxx' autocomplete='off'>
autocomplete='off' 会使将用户名/密码还原到 loginForm 失败,因为您不允许它“自动完成”用户名/密码。