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

in 标签,但这没有任何区别.

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

谢谢Eric

ps添加到我的问题,我肯定使用存储密码的浏览器,我从来没有点击"永远不会这个网站"...这是一个技术问题,浏览器没有检测到它是一个登录表单,而不是操作员错误:-)

1> Timespace7..：

---

我找到了这个问题的完整解决方案.(我在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中触发"保存密码".

对于Chrome 27,通过提交包含带有属性名称='用户名'的输入文本字段和带有属性名称='密码'的输入密码字段的表单,将重定向到页面后触发"保存密码".因此,我们无法阻止由于提交表单而导致的重定向,但我们可以在完成ajax登录后进行重定向.(如果您希望ajax登录不重新加载页面或不重定向到页面,不幸的是,我的解决方案不起作用.)然后,我们可以使用

    
    
    Login

按下type ='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'标签形式

autocomplete='off' 将使恢复用户名/密码进入loginForm失败,因为您不允许它'自动填充'用户名/密码.

---

在Chrome中,'event.preventDefault()'会阻止显示"保存密码"提示,请参阅此错误:https://code.google.com/p/chromium/issues/detail？id = 282488

---

很多用户使用"ENTER"键提交表单,因为当用户提交表单时你已经"防止默认",没有任何事情会发生,那就是糟糕的用户体验.您可以在提交时检查输入密钥`keycode`,但是您将再次进入乞讨......

---

Chrome 46修复了错误的行为-不再需要任何解决方法。看到http://stackoverflow.com/a/33113374/810109

2> 小智..：

---

使用按钮登录:

如果您使用type="button"带有onclick处理程序的登录使用ajax,则浏览器将不提供保存密码.

由于此表单没有提交按钮且没有操作字段,因此浏览器不会提供保存密码.

---

使用提交按钮登录:

但是,如果您将按钮更改为type="submit"并处理提交,则浏览器将提供保存密码.

使用此方法,浏览器应提供保存密码.

---

这是两种方法中使用的Javascript:

function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}

---

我不明白,为什么这个答案如此赞成？

3> TK421..：

---

我一直在努力解决这个问题,最后我能够找到问题以及导致失败的原因.

这一切都源于我的登录表单被动态注入页面(使用backbone.js).只要我将登录表单直接嵌入到我的index.html文件中,一切就像魅力一样.

我认为这是因为浏览器必须知道有一个现有的登录表单,但由于我的动态注入页面,它不知道"真正的"登录表单曾经存在过.

4> 小智..：

---

这个解决方案适用于我,由Eric发布在编码论坛上

---

它没有提示它的原因是因为浏览器需要页面以phyiscally方式刷新回服务器.您可以做的一个小技巧是使用表单执行两个操作.第一个动作是onsubmit让它调用你的Ajax代码.还有表单目标隐藏的iframe.

码:

看看是否会导致出现提示.

埃里克

---

发表于http://www.codingforums.com/showthread.php?t=123007

---

作为一个说明,我发现如果表单是[提交给自己],Chrome 11不提供保存凭据(http://stackoverflow.com/questions/1131781/blank-html-form-action-posting-back-对个体经营).所以你需要将`action`设置为一些虚拟页面.

5> Michal Rohar..：

---

有一个终极解决方案强制所有浏览器(测试:chrome 25,safari 5.1,IE10,Firefox 16)要求使用jQuery和ajax请求保存密码:

JS:

$(document).ready(function() {
    $('form').bind('submit', $('form'), function(event) {
        var form = this;

        event.preventDefault();
        event.stopPropagation();

        if (form.submitted) {
            return;
        }

        form.submitted = true;

        $.ajax({
            url: '/login/api/jsonrpc/',
            data: {
                username: $('input[name=username]').val(),
                password: $('input[name=password]').val()
            },
            success: function(response) {
                form.submitted = false;
                form.submit(); //invoke the save password in browser
            }
        });
    });
});

HTML:

    Username
    
    Password
    
   

诀窍在于停止表单提交自己的方式(event.stopPropagation()),而是发送自己的代码($ .ajax())并在ajax的成功回调中再次提交表单,以便浏览器捕获它并显示请求密码保存.您还可以添加一些错误处理程序等.

希望它对某人有所帮助.

---

这实际上是一个HTTP获取`login.php？username = username&password = password`,这首先取消了保存密码的全部目的

6> w00t..：

---

我尝试了spetson的答案,但这对我来说不适用于Chrome 18.我的工作是为iframe添加一个加载处理程序而不是中断提交(jQuery 1.7):

function getSessions() {
    $.getJSON("sessions", function (data, textStatus) {
        // Do stuff
    }).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
    $('#loginForm').fadeOut();
}); 
$('#loginframe').on('load', getSessions);
getSessions();

HTML:

    
Please log in
    

            Username :
            
            Password :
            
            

            Login!
    

getSessions()执行AJAX调用,如果失败则显示loginForm div.(如果未对用户进行身份验证,则Web服务将返回403).

测试也适用于FF和IE8.