嘿，我正在开发一个Web应用程序，其中登录对话框的工作方式如下：
问题是：与其他网站一样，浏览器从未提供通常的“保存此密码？是/永不/现在不”提示。
我尝试使用“autocomplete ='on'”将<div>包装在<form>标记中，但没有任何变化。
是否可能让浏览器在不重大改造我的登录流程的情况下提示存储密码？
谢谢 埃里克
p.s.为了补充我的问题，我肯定正在使用存储密码的浏览器，而且我从未单击过“永不为此网站”，...这是浏览器无法检测到它是登录表单而不是操作员错误的技术问题:-)
我找到了这个问题的完整解决方案。（我已经在 Chrome 27 和 Firefox 21 中测试过。）
需要知道两件事情：
对于Firefox 21，当检测到一个包含输入文本框和输入密码框的表单被提交时，就会触发“保存密码”功能。所以我们只需要使用
$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin()通过ajax登录并重新加载/重定向到已登录页面，而event.preventDefault()阻止了由于提交表单而进行的原始重定向。
如果您只处理Firefox，则上述解决方案就足够了，但在Chrome 27中无法正常工作。然后您会问如何在Chrome 27中触发“保存密码”。
对于Chrome 27，“保存密码”是在提交包含输入文本字段属性名为'username'和输入密码字段属性名为'password'的表单后重定向到该页面时触发的。因此，我们无法阻止由于提交表单而进行的重定向，但是我们可以在完成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>
使用 type='button' 的按钮在点击时不会提交表单。然后，将一个函数绑定到按钮实现ajax登录。最后，调用 $('#loginForm').submit(); 将页面重定向到已登录页面。如果已登录页面和当前页面相同，则可以将 'signedIn.xxx' 替换为当前页面以进行“刷新”。
现在，你会发现 Chrome 27 的方法也适用于 Firefox 21。因此最好使用它。
如果您已经在HTML中硬编码了 loginForm，则恢复已保存的密码并不会有任何问题。
但是，如果您使用js/jquery来动态创建 loginForm，保存的用户名/密码将不会绑定到 loginForm，因为只有在文档加载时才会绑定保存的用户名/密码。
因此，您需要将 loginForm 硬编码为HTML并使用js/jquery来动态移动/显示/隐藏 loginForm。
备注： 如果您使用 ajax 登录，请不要在 form 标签中添加 autocomplete='off'。
<form id='loginForm' action='signedIn.xxx' autocomplete='off'>
autocomplete='off'会使得恢复用户名/密码到登录表单失败，因为您不允许其自动填写用户名/密码。
name 属性值是什么？目前我的字段名为 identity，但 Chrome 没有提示保存密码对话框。 - CodeBrauer如果您使用带有 onclick 处理程序的 type="button" 来使用 ajax 登录，则浏览器不会提供保存密码的选项。
<form id="loginform">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="doLogin" type="button" value="Login" onclick="login(this.form);" />
</form>
由于该表单没有提交按钮，且没有操作字段，浏览器不会提示保存密码。
但是，如果您将按钮更改为type="submit"并处理提交，则浏览器将提示保存密码。
<form id="loginform" action="login.php" onSubmit="return login(this);">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="doLogin" type="submit" value="Login" />
</form>
使用这种方法，浏览器应该会提供保存密码的选项。
以下是两种方法中使用的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
}
我自己一直在苦苦挣扎，终于能够找到问题所在以及导致失败的原因。
这一切都源于我的登录表单是通过backbone.js动态注入到页面中的。当我将我的登录表单直接嵌入到index.html文件中时，一切都像魔法般正常工作了。
我认为这是因为浏览器必须知道存在一个现有的登录表单，但由于我的表单是动态注入到页面中的，它不知道是否真正存在“真实”的登录表单。
这个解决方案由Eric在codingforums上发布，对我很有用。
它不弹出的原因是浏览器需要页面物理刷新回到服务器。一个小技巧是在表单中执行两个动作。第一个动作是在提交时调用您的Ajax代码。另外让表单目标指向一个隐藏的iframe。
代码：
<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">
看看是否会出现提示。
Eric
iframe的解决方法。请参见https://dev59.com/tGEi5IYBdhLWcg3whcri#33113374。 - mkurz这将自动启用浏览器中的自动完成并保存密码。
autocomplete="on" (表单)autocomplete="username" (输入框, 邮箱/用户名)autocomplete="current-password" (输入框, 密码)<form autocomplete="on">
<input id="user-text-field" type="email" autocomplete="username"/>
<input id="password-text-field" type="password" autocomplete="current-password"/>
</form>
请查看苹果官方文档了解更多信息： 在HTML输入元素上启用密码自动填充
有一种终极解决方案，可以强制所有浏览器（已测试：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:
<form id="loginform" action="login.php" autocomplete="on">
<label for="username">Username</label>
<input name="username" type="text" value="" autocomplete="on" />
<label for="password">Password</label>
<input name="password" type="password" value="" autocomplete="on" />
<input type="submit" name="doLogin" value="Login" />
</form>
关键在于阻止表单按照自己的方式提交（event.stopPropagation()），而是发送自己的代码($.ajax()), 并在ajax的成功回调函数中再次提交表单，这样浏览器就能捕获它并显示要求保存密码的请求。您也可以添加一些错误处理程序等。
希望对某些人有帮助。
login.php?username=username&password=password，这样做完全违背了最初保存密码的目的。 - DATEx2我尝试了 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：
<div id="loginForm">
<h3>Please log in</h3>
<form action="/login" method="post" target="loginframe">
<label>Username :</label>
<input type="text" name="login" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password"/>
<br/>
<button type="submit" id="loginB" name="loginB">Login!</button>
</form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>
getSessions()将执行AJAX调用，如果失败则显示loginForm div。（如果用户未经过身份验证，Web服务将返回403）。
已在FF和IE8中进行测试，可正常工作。
/login）返回一些文本或其他可见内容。 - Stephen Bunchiframe的解决方法。请参见https://dev59.com/tGEi5IYBdhLWcg3whcri#33113374。 - mkurz目前的回答没有清楚地表明您可以使用HTML5历史记录API来提示保存密码。
首先，您需要确保至少有一个带有密码和电子邮件或用户名字段的<form>元素。只要使用正确的输入类型（密码、电子邮件或用户名），大多数浏览器会自动处理此问题。但是为了确保，请为每个输入元素正确设置自动完成值。
您可以在此处找到自动完成值列表：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
您需要的是：username、email和current-password
然后您有两种可能性：
history.pushState({}, "Your new page title");
您也可以更改页面的URL，但这不是提示保存密码所必需的:
history.pushState({}, "Your new page title", "new-url");
文档：https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
这样做的另一个好处是，如果用户输入密码不正确，您可以防止浏览器询问是否保存密码。请注意，在某些浏览器中，即使调用 preventDefault 并且不使用历史记录 API，浏览器仍然会一直要求保存凭据。
如果您不想导航离开或修改浏览器历史记录，则可以改用 replaceState（这也有效）。
history.pushState({}, null, "您的新页面标题"); 来更改URL而不进行任何导航。 - Delcon<input type="password">的表单字段。您的密码表单字段是否实现类似于此？form.elements[n].type == "password"（迭代所有表单元素）来检测密码，然后通过向后搜索表单元素以查找在密码字段之前的文本字段来检测用户名字段（更多信息here）。据我所知，您的登录表单需要成为<form>的一部分，否则Firefox将无法检测到它。$(function() {
setTimeout(function() {
$('form').fadeIn();
}, 5000);
});
HTML:
<form method="POST" style="display: none;">
<input name='email' id='email' type='email' placeholder='email' />
<input name='password' id='password' type='password' placeholder='password' />
<button type="submit">LOGIN</button>
</form>