我找到了这个问题的完整解决方案。(我已经在Chrome 27和Firefox 21中对此进行了测试)。
有两件事要知道:
- 触发“保存密码”,然后
- 恢复保存的用户名/密码
1.触发“保存密码”:
对于Firefox 21,当它检测到存在包含输入文本字段的表单并且提交了输入密码字段时,将触发“保存密码”。所以我们只需要使用
$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin()
执行ajax登录并重新加载/重定向到登录页面,同时event.preventDefault()
由于提交表单而阻止了原始重定向。
如果仅使用Firefox,上述解决方案就足够了,但在Chrome 27中不起作用。然后,您将询问如何在Chrome 27中触发“保存密码”。
对于铬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>
类型为'button'的Button将使单击按钮时不提交表单。然后,将功能绑定到按钮以进行ajax登录。最后,调用$('#loginForm').submit();
将重定向到登录页面。如果登录页面是当前页面,则可以将“ signIn.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失败,因为您不允许它“自动完成”用户名/密码。