如何让浏览器提示保存密码?

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

  1. 用户单击“登录”
  2. 登录表单HTML使用AJAX加载,并显示在页面上的DIV中
  3. 用户在字段中输入User/pass并单击submit。它不是一个<表格&gt--用户/通行证通过AJAX提交
  4. 如果用户/通行证正常,则在用户登录的情况下重新加载页面
  5. 若user/pass不正确,页面不会重新加载,但DIV中会出现错误消息,用户可以重试

问题是:浏览器从来没有像其他网站那样提供“保存此密码?是/从来没有/现在不保存”的提示

我尝试包装&lt;部门&gt</中的code>&lt;表格&gt标记为“autocomplete='on'”,但这没有什么区别

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

谢谢
埃里克

p、 为了补充我的问题,我肯定在使用存储密码的浏览器,我从来没有点击过“此站点从不”…这是一个技术问题,浏览器没有检测到这是一个登录表单,而不是操作员错误:-)

我找到了这个问题的完整答案。(我已经在Chrome 27和Firefox 21上测试过了)

有两件事需要知道:

  1. 触发“保存密码”,然后
  2. 还原保存的用户名/密码

1。触发“保存密码”:

对于Firefox 21,当它检测到有一个表单包含输入文本字段并提交了输入密码字段时,“保存密码”被触发。所以我们只需要使用

$(“#登录按钮”)。单击(someFunctionForLogin);
$('#loginForm').submit(函数(事件){event.preventDefault();});

someFunctionForLogin()event.preventDefault()提交表单时,ajax登录并重新加载/重定向到登录页面

如果你只处理Firefox,上面的解决方案就足够了,但它在Chrome27中不起作用。然后,您将询问如何在Chrome 27中触发“保存密码”

对于Chrome 27被重定向到页面后,会触发“保存密码”,提交表单,表单中包含属性name='username'的输入文本字段,属性name='password'的输入密码字段。因此,我们不能因为提交表单而阻止重定向,但我们可以在完成ajax登录后进行重定向(如果您希望ajax登录不重新加载页面或不重定向到页面,很遗憾,我的解决方案不起作用。)然后,我们可以使用

&lt;表单id='loginForm'action='signedIn.xxx'方法='post'&gt;
&lt;输入类型='text'name='username'&gt;
&lt;输入type='password'name='password'&gt;
&lt;按钮id='loginButton'类型='button'&gt;登录&lt/按钮&gt;
&lt/表格&gt;
&lt;脚本&gt;
$(“#登录按钮”)。单击(someFunctionForLogin);
函数someFunctionForLogin(){
如果(/*ajax登录成功*/){
$('#loginForm')。提交();
}
否则{
//执行某些操作以显示登录失败(例如显示失败消息)
}
}
&lt/脚本&gt;

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

现在,你会发现Chrome27的方法也适用于Firefox21。所以最好使用它

2。还原保存的用户名/密码:

如果您已经将loginForm硬编码为HTML,则在loginForm中恢复保存的密码不会有问题。
但是,如果使用js/jquery动态生成登录信息表单,则保存的用户名/密码将不会绑定到登录信息表单,因为保存的用户名/密码仅在加载文档时绑定。
因此,您需要将loginForm硬编码为HTML,并使用js/jquery动态移动/显示/隐藏loginForm


备注:
如果您使用ajax登录,请不要像这样以标记形式添加autocomplete='off'

&lt;表单id='loginForm'action='signedIn.xxx'autocomplete='off'&gt;

autocomplete='off'将导致将用户名/密码还原到登录表单失败,因为您不允许它“自动完成”用户名/密码

发表评论