浏览器是否支持ajax加载的登录表单的自动完成功能？

Question

我的问题是,浏览器的(IE&FF)自动完成功能不适用于我的登录表单.

我有一个带有CakePHP和jQuery的webapp.允许访问者不显眼地登录/注册.登录表单位于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-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提交似乎扮演次要角色,因为用户名/密码已保存.它们不是为加载ajax的HTML元素自动输入的!(测试站点不使用jQuery提交.)相关问题:浏览器自动完成/保存表单在ajax请求中不起作用

Answer 1

至少在Firefox中自动完成会在页面加载期间触发.之后添加内容将错过机会之窗.

登录表单很小.我从一开始就将它包含在页面中,并考虑将其隐藏在CSS中,直到需要它为止.