Встроенный автозаполнение браузера для динамически генерируемых форм (обрабатывается с помощью ajax)

Я динамически генерирую форму. Для простоты предположим, что это форма входа в систему с адресом электронной почты/паролем. Форма отправляется, но onsubmit запускает запрос AJAX, который обрабатывает фактический логин, и событие отправки отменяется (e.preventDefault()).

Я использую e.preventDefault(), чтобы отменить действие по умолчанию для формы, то есть перейти на страницу в "действие", но это также отменяет обнаружение автозаполнения браузера.

Я думаю, вам нужно заполнить несколько требований для работы автозаполнения:

Ваше поле ввода type="text" должно иметь name
Форма должна быть отправлена < - это не происходит в моем случае

Правильно ли мой анализ и есть ли способ сделать автозаполнение в этом случае?

Чтобы отвлечь фанатов: я не ищу какое-либо решение, которое включает jQuery или [вставлять фреймворк], я хочу использовать функцию автозаполнения собственного браузера. У меня нет списка слов, которые я хочу автозаполнять с помощью.

Ответ 1

Решение DMoses сильно вдохновило мое решение, но есть существенная разница, поэтому я подумал, что было бы неплохо сделать мое собственное решение, щедрость идет на DMoses, хотя: P

Решение DMoses перемещает (или копирует) форму в iframe и затем отправляет ее. Причина, по которой вы хотите сделать это, - значит, ваш "родитель" не перезагружается. Существует более простое решение: имеют форму submit в iframe. Это работает одинаково, и вам не нужно копировать любые узлы.

Этот шаг полностью повторяется. Единственным недостатком является то, что вы не контролируете, когда добавляется запись автозаполнения. Возможно, вы захотите добавить только действительные записи, но, по крайней мере, этот случай отлично имитирует поведение нормальной формы, если не было задействовано никакого аякса. Если вы хотите контролировать то, что добавляется к автозаполнению, используйте решение DMoses, скопируйте форму и отправьте ее в iframe.

Для меня этого достаточно:

<form onsubmit="return ajaxit();" autocomplete="on" target="the_iframe">
    <input id="foo" name="foo"/> 
    <input type="submit" />
</form>
<iframe id="the_iframe" name="the_iframe" src="javascript:false"></iframe> <!-- you'll want this hidden -->

Лучшая часть: для выполнения этой работы не требуется дополнительный JavaScript! (кроме создания уникального идентификатора/имени для формы, но это супер тривиально).

jsFiddle: http://jsfiddle.net/KzF6s/13/

Ответ 2

Хорошо, я нашел сложный способ сделать это:

Вот javascript:

function ajaxit() {
    var iFrameWindow = document.getElementById("myframe").contentWindow;
    iFrameWindow.document.body.appendChild( document.getElementById("myform").cloneNode(true));   
    var frameForm = iFrameWindow.document.getElementById("myform");
    frameForm.onsubmit = null;
    frameForm.submit();
    return false;
}

Вот html:

<form id="myform" onsubmit="return ajaxit();" autocomplete="on">
    <input id="foo" name="foo"/> 
    <input type="submit" />
</form>
<iframe id="myframe" src=""></iframe> <!-- you'll want this hidden -->

При нажатии кнопки submit выполняется метод ajaxit(). метод создает ту же форму в iframe и отправляет ее на сервер. Вы можете либо копировать, чтобы отправить запрос на сервер, либо выполнить отдельный запрос ajax и игнорировать iframe.

Я знаю, что он уродлив, но он работает.

EDIT: jsbin, чтобы играть с.

Ответ 3

После того, как вы немного поиграли с комментариями к обходным решениям других ответов, я решил сделать этот список для тех, кто может дождаться, когда браузеры справятся с этим правильно.

Итак, в качестве сводки эти версии браузера поддерживают значения autocomplete для форм, сгенерированных с помощью JavaScript:

FireFox 25
Chrome 33 (текущая версия - 31, поэтому скоро)
Internet Explorer 11 (ссылка)