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

Question

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

我有一个带有 CakePHP 和 jQuery 的网络应用程序。允许访问者不引人注意地登录/注册。登录表单位于通过 AJAX 加载的 div 中。 (这样可以在不重新加载页面的情况下登录。)

浏览器确实将其识别为登录字段，因为它们会提示我在单击登录时保存凭据。他们确实保存了用户名/密码，因为它们出现在浏览器设置中保存的用户名/密码之间。但是保存的用户名/密码永远不会自动输入。当页面加载时，它们不会显示为预先输入的。当我开始输入用户名时，用户名显示为建议，但即使您选择了它，它旁边也没有输入密码。为什么？我怎样才能让它工作？

你可以自己测试一下，这里是一个简单的 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>

加载的 View (未登录时):

<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 提交。)相关问题:browser autocomplete/saved form not work in ajax request

Answer 1

自动完成，至少在 Firefox 中，在页面加载期间触发。之后再添加内容会错失良机。

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