不要浏览器支持自动完成对Ajax加载的登录表单呢？ [英] Do browsers support autocomplete for ajax loaded login forms at all?
问题描述
我的问题是，该浏览器（IE＆安培; FF）自动完成不适合我的登录表单工作
My problem is, that the browsers' (IE&FF) autocomplete does not work for my login form.
我有CakePHP的＆放一个web应用; jQuery的。为了让游客登录/注册悄悄地。登录表单是一个div，它是通过AJAX加载中。 （这使得无需重新加载页面登录。）
I have a webapp with CakePHP & jQuery. To allow visitors to login/register unobtrusively. The login form is inside a div, which is loaded via AJAX. (This enables logging in without a page reload.)
中的浏览器知道它是可以登录场，因为他们提示我点击登录时保存的凭证。而且他们确实保存用户名/密码，因为它们出现在浏览器的设置保存者之间。但保存的用户名/密码永远不会自动输入。它们不会出现pre-进入页面加载时。当我的用户名开始打字，用户名显示为一个建议，但即使你选择它，密码没有输入旁边。为什么？我怎样才能得到这个工作？
The browsers do recognize it as a login field, as they prompt me to save the credentials when clicking login. And they really do save the username/password, as they appear between the saved ones in the browser settings. But the saved username/password is never entered automatically. They do not appear pre-entered when the page loads. When I start typing in the username, the username appears as a suggestion, but even when you select it, the password is not entered next to it. Why? How can I get this working?
这是你可以自己测试一下，这里是一个简单的AJAX登录表单：
That you can test it yourself, here is a simple AJAX login form:
http://gablog.eu/test/ajaxlogin.html
它加载以下登录表单，如果你去下面的网址，就会自动完成只是纯形式的工作，所以它不是与窗体本身的问题，而是它是AJAX加载：
http://gablog.eu/test/loginform.html
It loads the following login form, if you go to the url below, autocomplete will work for just the plain form, so it is not a problem with the form itself, but rather that it is AJAX loaded: http://gablog.eu/test/loginform.html
布局：
<div id="user-bar">
<script type="text/javascript">
$(function() {
$("#user-bar").load('loginform.html').html();
});
</script>
</div>
加载视图（在不登录）：
The view loaded (when not logged in):
<form id="form-login" action="" onsubmit="login(); return false;">
<input type="text" id="username" name="username"/>
<input type="password" id="password" name="password"/>
<input type="submit" value="Login"/>
<div id="login-error" class="error-message"></div>
</form>
<script type="text/javascript">
function login() {
$.post('/ajax/login', $("#form-login").serialize(), function(data) {
if (data.success) {
$("#user-bar").load('userbar.html').html();
} else {
$("#login-error").html(data.message);
}
}, "json");
}
</script>
要澄清：我不想使用AJAX自动完成，我想浏览器的自动完成功能为我的登录表单工作。这是我的形式和浏览器之间的一个问题。 提交的jQuery似乎扮演一个次要角色，因为用户名/密码被保存。他们只是不自动进入阿贾克斯加载HTML元素（测试站点不使用jQuery提交。）相关的问题：<！一个href=\"http://stackoverflow.com/questions/1622628/browser-autocomplete-saved-form-not-work-in-ajax-request\">http://stackoverflow.com/questions/1622628/browser-autocomplete-saved-form-not-work-in-ajax-request
To clarify: I do not want to use AJAX autocomplete, I want the browser's autocomplete to work for my login form. This is an issue between my form and the browser. jQuery submission seems to play a minor role, as the usernames/passwords are saved. They are just not auto-entered for ajax loaded HTML elements! (The test site does not use jQuery submission.) Related question: http://stackoverflow.com/questions/1622628/browser-autocomplete-saved-form-not-work-in-ajax-request
推荐答案
自动完成，在Firefox至少，页面加载过程中触发。添加内容后会错过的机会之窗。
Autocomplete, in Firefox at least, triggers during page load. Adding the content afterwards would miss the window of opportunity.
一个登录表单很小。我想包括在从一开始的页面，并考虑与CSS隐藏它，直到它被通缉。
A login form is tiny. I'd include it in the page from the outset and consider hiding it with CSS until it is wanted.
这篇关于不要浏览器支持自动完成对Ajax加载的登录表单呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
