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

Question

嘿，我正在使用一个具有如下登录对话框的Web应用程序：

1. 用户点击“登录”
2. 登录表单HTML随AJAX一起加载，并在第DIV页上显示
3. 用户在字段中输入用户/密码，然后单击提交。不是<form>-用户/密码通过AJAX提交
4. 如果用户/密码正确，则页面将在用户登录后重新加载。
5. 如果用户/密码不正确，则不会重新加载页面，但DIV中会显示错误消息，并且用户可以重试。

问题出在这里：浏览器从不提供通常针对其他站点的“保存此密码？是/从不/不立即”提示。

我尝试用“ autocomplete =’on’” 包装<div>in <form>标签，但这没什么区别。

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

谢谢埃里克

ps添加到我的问题中，我肯定是与存储密码的浏览器一起工作，而且我从未单击过“从不访问此站点”
…这是一个技术问题，浏览器没有检测到它是登录表单，而不是操作员错误:-)

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中触发“保存密码”。

对于 铬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失败，因为您不允许它“自动完成”用户名/密码。