浏览器是否完全支持 ajax 加载的登录表单的自动完成? [英] Do browsers support autocomplete for ajax loaded login forms at all?

问题描述

我的问题是，浏览器的 (IE&FF) 自动完成功能对我的登录表单不起作用.

我有一个带有 CakePHP & 的 web 应用程序jQuery.允许访问者在不显眼的情况下登录/注册.登录表单位于通过 AJAX 加载的 div 中.(这样可以在不重新加载页面的情况下登录.)

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

你可以自己测试，这是一个简单的AJAX登录表单:

http://gablog.eu/test/ajaxlogin.html

它加载了以下登录表单，如果您转到下面的 url，自动完成功能将仅适用于普通表单，因此表单本身不是问题，而是加载了 AJAX:http://gablog.eu/test/loginform.html

布局:

<script type="text/javascript">$(函数(){$("#user-bar").load('loginform.html').html();});

加载的视图(未登录时):

<input type="text" id="username" name="username"/><input type="password" id="password" name="password"/><input type="submit" value="登录"/><div id="login-error" class="error-message"></div></表单><script type="text/javascript">函数登录(){$.post('/ajax/login', $("#form-login").serialize(), function(data) {如果(数据.成功){$("#user-bar").load('userbar.html').html();} 别的 {$("#login-error").html(data.message);}}, "json");}

澄清:我不想使用 AJAX 自动完成功能，我希望浏览器的自动完成功能适用于我的登录表单.这是我的表单和浏览器之间的问题.jQuery 提交似乎起次要作用，因为保存了用户名/密码.它们只是不会为 ajax 加载的 HTML 元素自动输入！(测试站点不使用 jQuery 提交.)相关问题:浏览器自动完成/保存的表单在 ajax 请求中不起作用

解决方案

自动完成，至少在 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:

<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>

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屋！