Подтвердить что ты не робот

Автозаполнение триггера без отправки формы

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

Я попробовал вручную вводить вложения autocomplete = "on", но без формы для отправки браузер не знает, когда он должен хранить значения, поэтому это не имеет никакого эффекта.

Я также попробовал обернуть входы в форме, которая имеет onSubmit = "return false;", но предотвращение отправки фактической отправки формы также не позволяет браузеру сохранять значения своих входов.

Конечно, можно вручную использовать localStorage или cookie для сохранения входов, а затем генерировать подсказки автозаполнения от них, но я надеюсь найти решение, которое реагирует на поведение собственного браузера, а не дублирует его вручную.

4b9b3361

Ответ 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>