Автозаполнение триггера без отправки формы
Я пишу очень простое веб-приложение с тремя текстовыми вводами. Входы используются для генерации результата, но вся работа выполняется в Javascript, поэтому нет необходимости отправлять форму. Я пытаюсь найти способ заставить браузер хранить входные значения для автозаполнения, как если бы они были в форме, которая была отправлена.
Я попробовал вручную вводить вложения autocomplete = "on", но без формы для отправки браузер не знает, когда он должен хранить значения, поэтому это не имеет никакого эффекта.
Я также попробовал обернуть входы в форме, которая имеет onSubmit = "return false;", но предотвращение отправки фактической отправки формы также не позволяет браузеру сохранять значения своих входов.
Конечно, можно вручную использовать localStorage или cookie для сохранения входов, а затем генерировать подсказки автозаполнения от них, но я надеюсь найти решение, которое реагирует на поведение собственного браузера, а не дублирует его вручную.
Ответы
Ответ 1
Протестировано с помощью Chrome, IE и Firefox:
<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>
<form target="remember" method="post" action="/content/blank">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="">
</fieldset>
<button type="submit" class="hidden"></button>
</form>
В вашем триггере Javascript отправьте, например. $("form").submit();
$("#submit_button").click()
(обновлено с комментариями)
Вам нужно вернуть пустую страницу в /content/blank для получения и публикации (о: blank не работает для меня, но YMMV).
Ответ 2
Мы знаем, что браузер сохраняет свою информацию только при e.preventDefault()
формы, что означает, что мы не можем отменить ее с помощью return false
или e.preventDefault()
Что мы можем сделать, так это заставить данные отправлять данные в никуда без перезагрузки страницы. Мы можем сделать это с помощью iframe
<iframe name="💾" style="display:none" src="about:blank"></iframe>
<form target="💾" action="about:blank">
<input name="user">
<input name="password" type="password">
<input value="Login" type="submit">
</form>
Демо на JSfiddle (протестировано в IE9, Firefox, Chrome)
Плюсы за принятый в настоящее время ответ:
- более короткий код;
- нет jQuery;
- страница на стороне сервера не загружена;
- нет дополнительного JavaScript;
- никаких дополнительных классов не требуется.
Там нет дополнительного JavaScript. Вы обычно прикрепить обработчик к submit
события формы для отправки XHR и не отменить его.
Пример Javascript
// for modern browsers with window.fetch
document.forms[0].addEventListener('submit', function (event) {
fetch('login.php', {
method: 'post',
body: new FormData(event.target))
}).then(r => r.text()).then(() => { /* login completed */ })
// no return false!!
});
Поддержка без JavaScript
В идеале вы должны позволить форме работать и без javascript, поэтому удалите target
и установите действие для страницы, которая будет получать данные вашей формы.
<form action="login.php">
А затем просто добавьте его через javascript при добавлении события submit
:
formElement.target = '💾';
formElement.action = 'about:blank';
Ответ 3
Я не тестировал это, но это может сработать, если вы передадите форму в скрытый iframe (чтобы форма была отправлена, но текущая страница не перезагружена).
<iframe name="my_iframe" src="about:blank"></iframe>
<form target="my_iframe" action="about:blank" method="get">...</form>
Ответ 4
Возможно, вы можете использовать этот Twitter Typeahead... - это очень полная реализация автозаполнения с локальной и удаленной предварительной выборкой, и это делает использование localStorage для сохранения результатов, а также отображение подсказки во входном элементе... код легко понять, и если вы не хотите использовать полный плагин jquery, я думаю, вы можете взглянуть на код на посмотрите, как достичь того, чего вы хотите...
Ответ 5
Из того, что я искал.. кажется, вам нужно определить имена. Некоторые стандартные имена, такие как "имя", "электронная почта", "телефон", "адрес", автоматически сохраняются в большинстве браузеров.
Проблема в том, что браузеры по-разному обрабатывают эти имена. Например, вот хром-регулярное выражение:
- имя: "имя. * имя | инициалы | имя_файла | первый $"
- электронная почта: "e.?mail"
- адрес (строка 1): "адрес. * строка | адрес1 | адрес1 | улица"
- почтовый индекс: "почтовый индекс | почтовый | почтовый. * код | pcode | ^ 1z $"
Но Chrome также использует autocomplete
, так что вы можете настроить имя и указать тип автозаполнения, но я считаю, что это не для настраиваемых полей.
Вот стандартный хром
И это еще одна вещь в IE, Opera и Mozilla. Сейчас вы можете попробовать решение iframe там, чтобы вы могли его отправить. (Может это что-то полустандартное)
Ну, это все, что я могу помочь.
Ответ 6
Для тех, кто предпочел бы не изменять свою существующую функциональность формы, вы можете использовать вторую форму для получения копий всех значений формы и затем отправить на пустую страницу перед отправкой основной формы. Вот полностью проверяемый HTML-документ с использованием JQuery Mobile, демонстрирующий решение.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form method="post">
<input type="text" name="email" />
<input type="submit" value="GO" onclick="save_autofill(this);" />
</form>
<script>
function save_autofill(o) {
$(':input[name]', $('#hidden_form')).val(function () {
return $(':input[name=' + this.name + ']', $(o.form)).val();
});
$('#hidden_form').find("input[type=submit]").click();
}
</script>
<iframe name="hidden_iframe" style="display:none"></iframe>
<form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none">
<input type="text" name="email" />
<input type="submit" />
</form>
</body>
</html>
Функция save_autofill
просто должна быть вызвана на кнопку отправки основной формы. Если у вас есть сценарий, который отправляет вашу форму, поместите этот вызов после вызова save_autofill
. У вас должно быть именованное текстовое поле в hidden_form
для каждого из них в вашей основной форме.
Если ваш сайт использует SSL, вы должны изменить URL-адрес для about:blank
с помощью https://about:blank
.
Ответ 7
Вы можете использовать jQuery для сохранения данных автозаполнения в локальном хранилище при фокусировке и при фокусировке на автозаполнение до значения.
то есть.
$(function(){
$('#txtElement').on('focusout',function(){
$(this).data('fldName',$(this).val());
}
$('#txtElement').on('focusin',function(){
$(this).val($(this).data('fldName'));
}
}
Вы также можете связывать логику продолжительности других событий также в зависимости от требований вашего приложения.
Ответ 8
Убедитесь, что вы отправляете форму через POST. Если вы отправляете через ajax, сделайте <form autocomplete="on" method="post">
, опуская атрибут action
.
Ответ 9
вы можете использовать "." в обоих случаях iframe src и form.
<iframe id="remember" name="remember" style="display:none;" src="."></iframe>
<form target="remember" method="post" action=".">
<input type="text" id="path" size='110'>
<button type="submit" onclick="doyouthing();">your button</button>
</form>