Моя проблема заключается в том, что автозаполнение браузеров (IE & FF) не работает для моей формы входа.
У меня есть webapp с CakePHP & jQuery. Чтобы посетители могли незарегистрированно войти в систему / зарегистрироваться. Форма входа находится в 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
Autocomplete, по крайней мере, в Firefox, срабатывает при загрузке страницы. Добавление контента впоследствии пропустит окно возможностей.
Форма входа – крошечная. Я бы включил его на странице с самого начала и подумал о том, чтобы скрыть его с помощью CSS до тех пор, пока он не захочет.
Если это помогает, msdn говорит (в нижней части страницы):
Примечание: если выполняются оба следующих условия:
- Страница была доставлена через HTTPS
- Страница была доставлена с заголовками или тегом META, который предотвращает кеширование
… функция автозаполнения отключена независимо от наличия или значения атрибута Autocomplete. Это замечание относится к IE5, IE6, IE7 и IE8.
Я ободрил интересный бит.
,
Я не думаю, что вы можете заставить автозаполнение формы работать, если вы загружаете форму через ajax (по безопасности я не знаю, можно ли ее действительно злоупотреблять или нет, но тот факт, что скрипт может начать загружать поля в страница, чтобы увидеть, какие данные вставлены, не выглядит слишком хорошо для меня).
Если вы можете, лучшим вариантом было бы добавить условный блок в файл php и включить форму или нет в зависимости от того, зарегистрирован ли пользователь или нет. Если по какой-то причине вы не можете этого сделать, вы можете попытаться сделать document.write () вместо вызова ajax (и да, используя document.write уродливо 🙂
Я вижу случай, когда форму входа нужно вытащить с помощью ajax – если остальная часть сайта загружается как статический html (кеш). Форма входа (или аннулированная информация пользователя) не может отображаться статически.
Таким образом, ваше решение заключается в том, чтобы вытащить форму сразу после объявления (конечный тег) элемента DOM, который служит в качестве родительского элемента для html, созданного ajax-pull loginform, например:
<div id="loginforms_parent"></div> <script language="javascript"> /* ajax request and insert into DOM */ </script>
И браузер имеет форму в DOM onLoad. Протестировано, firefox делает автозаполнение в этом случае.
Я не доволен загрузкой формы входа на мою страницу во время загрузки, поэтому я добавил проблему с Chrome;
http://code.google.com/p/chromium/issues/detail?id=123955&thanks=123955&ts=1334713139
есть ответ: http://www.webmasterworld.com/javascript/4532397.htm . он делает что-то с методом отправки, а затем использует метод click. поскольку я знаю, что значения не сохраняются, если форма не отправлена. Я думаю, автор этого решения просто делает его представленным, хотя кнопка отправки не нажата пользователем.