浏览器是否支持ajax加载的登录表单的自动完成? [英] Do browsers support autocomplete for ajax loaded login forms at all?
问题描述
我的问题是,浏览器的(IE& FF)自动完成功能不适用于我的登录表单。
我有一个webapp的CakePHP& jQuery。允许访客登录/注册不引人注目。登录表单位于div内,通过AJAX加载。
浏览器会将其识别为登录字段,因为它们会提示我在单击登录时保存凭据。他们真的保存用户名/密码,因为它们出现在浏览器设置中保存的用户名/密码之间。但保存的用户名/密码从不会自动输入。当页面加载时,它们不会显示预先输入。当我开始输入用户名时,用户名将显示为建议,但即使您选择该用户名,也不会在其旁边输入密码。为什么?
您可以自己测试,这里是一个简单的AJAX登录表单:
http://gablog.eu/test/ajaxlogin.html
它加载以下登录表单,如果你转到下面的url,自动完成将只适用于纯表单,所以它不是一个问题与表单本身,而是它是已载入AJAX:
http://gablog.eu/test/loginform.html
布局:
< div id =user- bar>
< script type =text / javascript>
$(function(){
$(#user-bar)。load('loginform.html')。html();
});
< / script>
< / div>
视图已加载(未登录时):
< form id =form-loginaction =onsubmit =login(); return false;>
< input type =textid =usernamename =username/>
< input type =passwordid =passwordname =password/>
< input type =submitvalue =Login/>
< div id =login-errorclass =error-message>< / div>
< / form>
< script type =text / javascript>
function login(){
$ .post('/ ajax / login',$(#form-login)。serialize(),function(data){
if .success){
$(#user-bar)。load('userbar.html')。html();
} else {
$(#login-error ).html(data.message);
}
},json);
}
< / script>
说明:我不想使用AJAX自动完成功能,我想要浏览器的自动完成功能登录表单。这是我的形式和浏览器之间的问题。 jQuery提交似乎扮演次要角色,因为用户名/密码被保存。他们只是没有自动输入的ajax加载的HTML元素!(测试网站不使用jQuery提交。)相关问题: 自动完成功能(至少在Firefox中)会在网页载入期间触发。 登录表单很小。我会从一开始就将它包含在页面中,并考虑用CSS隐藏它,直到需要它。 My problem is, that the browsers' (IE&FF) autocomplete does not work for my login form. 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.) 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? That you can test it yourself, here is a simple AJAX login form: http://gablog.eu/test/ajaxlogin.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 The layout: The view loaded (when not logged in): 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: browser autocomplete/saved form not work in ajax request Autocomplete, in Firefox at least, triggers during page load. Adding the content afterwards would miss the window of opportunity. 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屋!
<div id="user-bar">
<script type="text/javascript">
$(function() {
$("#user-bar").load('loginform.html').html();
});
</script>
</div>
<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>