Поддерживают ли браузеры автозаполнение для загруженных ajax форм входа?

Question

Моя проблема в том, что автозаполнение браузеров (IE & FF) не работает для моей формы входа.

У меня есть веб-приложение с CakePHP и jQuery. Чтобы позволить посетителям войти / зарегистрироваться ненавязчиво. Форма входа находится внутри div, который загружается через AJAX. (Это позволяет войти без перезагрузки страницы.)

Браузеры распознают его как поле для входа в систему, так как они предлагают мне сохранить учетные данные при нажатии входа в систему. И они действительно сохраняют имя пользователя / пароль, поскольку они появляются между сохраненными в настройках браузера. Но сохраненное имя пользователя / пароль никогда не вводится автоматически. Они не отображаются предварительно введенными при загрузке страницы. Когда я начинаю вводить имя пользователя, оно появляется в качестве подсказки, но даже когда вы выбираете его, пароль рядом с ним не вводится. Зачем? Как я могу заставить это работать?

Чтобы вы могли проверить это сами, вот простая форма входа в AJAX:

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

Он загружает следующую форму входа, если вы перейдете по ссылке ниже, автозаполнение будет работать только для простой формы, так что это не проблема с самой формой, а скорее то, что она загружена в 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 играет незначительную роль, поскольку имена пользователей и пароли сохраняются. Они просто не вводятся автоматически для HTML-элементов, загруженных ajax! (тестовый сайт не использует отправку jQuery.) Схожий вопрос: Форма автозаполнения / сохранения браузера не работает в запросе ajax

Answer 1

Автозаполнение, по крайней мере в Firefox, запускается при загрузке страницы. Добавление контента впоследствии упустит окно возможностей.

Форма входа крошечная. Я бы с самого начала включил его в страницу и рассмотрел возможность скрыть его с помощью CSS, пока он не будет востребован.

Answer 2

Если это поможет, msdn говорит (в нижней части страницы):

Примечание: если оба из следующих условия выполняются:

• Страница доставлена ​​по протоколу HTTPS
• Страница была доставлена ​​с заголовками или тегом META, который предотвращает кэширование

... функция автозаполнения отключен, независимо от наличия или значение автозаполнения приписывать. Это замечание относится к IE5, IE6, IE7 и IE8.

Я ободрил интересную часть.

.

Answer 3

Я не думаю, что вы можете заставить автозаполнение формы работать, если вы загружаете форму через ajax (в плане безопасности я не знаю, можно ли на самом деле злоупотреблять или нет, но факт, что скрипт может запуститься загрузка полей на страницу, чтобы увидеть, какие данные вставляются, выглядит не слишком хорошо для меня).

Если вы можете, лучшим вариантом будет добавить условный блок в файл php и включить форму или нет, в зависимости от того, вошел ли пользователь в систему или нет. Если по какой-то причине вы не можете этого сделать, вы можете попробовать сделать document.write () вместо вызова ajax (и да, использование document.write ужасно:)

Answer 4

ответ дан: http://www.webmasterworld.com/javascript/4532397.htm. он делает что-то с методом отправки, а затем использует метод щелчка. как я знаю, значения не сохраняются, если форма не отправлена. я думаю, что автор этого решения просто отправляет его, хотя кнопка «Отправить» не нажата пользователем.

Answer 5

Я не доволен загрузкой формы входа на мою страницу во время загрузки, поэтому вместо этого я подал ошибку в Chrome;

http://code.google.com/p/chromium/issues/detail?id=123955&thanks=123955&ts=1334713139

Answer 6

Я вижу случай, когда форму входа нужно тянуть с помощью ajax - если остальная часть сайта загружается как статический html (кеш). Форма входа (или информация о пользователе) не может отображаться статически.

Таким образом, ваше решение заключается в извлечении формы сразу после объявления (конечного тега) элемента DOM, который служит родительским элементом для html-формы login-ajax-pull, например:

<div id="loginforms_parent"></div>
<script language="javascript">
    /* ajax request and insert into DOM */
</script>

А браузер имеет вид в DOM onLoad. В этом случае Firefox выполняет автозаполнение.