嘿,我正在开发一个web应用程序,它有一个登录对话框,工作原理如下:
- 用户单击“登录”
- 登录表单HTML使用AJAX加载,并显示在页面上的DIV中
- 用户在字段中输入User/pass并单击submit。它不是一个
<;表格>--用户/通行证通过AJAX提交 - 如果用户/通行证正常,则在用户登录的情况下重新加载页面
- 若user/pass不正确,页面不会重新加载,但DIV中会出现错误消息,用户可以重试
问题是:浏览器从来没有像其他网站那样提供“保存此密码?是/从来没有/现在不保存”的提示
我尝试包装<;部门></中的code><;表格>标记为“autocomplete='on'”,但这没有什么区别
是否有可能让浏览器提供存储密码的功能,而无需对我的登录流进行重大修改
谢谢
埃里克
p、 为了补充我的问题,我肯定在使用存储密码的浏览器,我从来没有点击过“此站点从不”…这是一个技术问题,浏览器没有检测到这是一个登录表单,而不是操作员错误:-)
我找到了这个问题的完整答案。(我已经在Chrome 27和Firefox 21上测试过了)
有两件事需要知道:
- 触发“保存密码”,然后
- 还原保存的用户名/密码
1。触发“保存密码”:
对于Firefox 21,当它检测到有一个表单包含输入文本字段并提交了输入密码字段时,“保存密码”被触发。所以我们只需要使用
$(“#登录按钮”)。单击(someFunctionForLogin);
$('#loginForm').submit(函数(事件){event.preventDefault();});
someFunctionForLogin()在event.preventDefault()提交表单时,ajax登录并重新加载/重定向到登录页面
如果你只处理Firefox,上面的解决方案就足够了,但它在Chrome27中不起作用。然后,您将询问如何在Chrome 27中触发“保存密码”
对于Chrome 27,在被重定向到页面后,会触发“保存密码”,提交表单,表单中包含属性name='username'的输入文本字段,属性name='password'的输入密码字段。因此,我们不能因为提交表单而阻止重定向,但我们可以在完成ajax登录后进行重定向(如果您希望ajax登录不重新加载页面或不重定向到页面,很遗憾,我的解决方案不起作用。)然后,我们可以使用
<;表单id='loginForm'action='signedIn.xxx'方法='post'>;
<;输入类型='text'name='username'>;
<;输入type='password'name='password'>;
<;按钮id='loginButton'类型='button'>;登录</按钮>;
</表格>;
<;脚本>;
$(“#登录按钮”)。单击(someFunctionForLogin);
函数someFunctionForLogin(){
如果(/*ajax登录成功*/){
$('#loginForm')。提交();
}
否则{
//执行某些操作以显示登录失败(例如显示失败消息)
}
}
</脚本>;
带有type='Button'的按钮将使表单在单击按钮时不被提交。
然后,将函数绑定到用于ajax登录的按钮。最后,调用$('#loginForm').submit()重定向到登录页面。如果登录页面是当前页面,则可以用当前页面替换“signedIn.xxx”以进行“刷新”
现在,你会发现Chrome27的方法也适用于Firefox21。所以最好使用它
2。还原保存的用户名/密码:
如果您已经将loginForm硬编码为HTML,则在loginForm中恢复保存的密码不会有问题。
但是,如果使用js/jquery动态生成登录信息表单,则保存的用户名/密码将不会绑定到登录信息表单,因为保存的用户名/密码仅在加载文档时绑定。
因此,您需要将loginForm硬编码为HTML,并使用js/jquery动态移动/显示/隐藏loginForm
备注:
如果您使用ajax登录,请不要像这样以标记形式添加autocomplete='off'
<;表单id='loginForm'action='signedIn.xxx'autocomplete='off'>;
autocomplete='off'将导致将用户名/密码还原到登录表单失败,因为您不允许它“自动完成”用户名/密码