Как сохранить в браузере автозаполнение / автозаполнение при использовании вызовов AJAX - PullRequest
Новая
       5

Как сохранить в браузере автозаполнение / автозаполнение при использовании вызовов AJAX

27 голосов
/ 09 февраля 2012

Я заметил, что браузеры не сохраняют значения форм до тех пор, пока форма не будет отправлена, а это означает, что если вы используете AJAX вместо стандартной отправки формы, автозаполнение вашего браузера никогда не заполняется.Есть ли способ принудительно заполнять ваши браузеры автозаполнением / автозаполнением, чтобы мне было удобнее с формами, которые отправляются через AJAX?Досадно переходить на мою страницу AJAX, и мне приходится каждый раз вводить одни и те же вещи в полях формы, потому что браузер их не запоминает.

Мой вопрос в значительной степени идентичен этому, за исключением того, что в качестве принятого ответа на этот вопрос предоставляется только обходной путь в FireFox.Я ищу решение, которое работает во всех основных браузерах (по крайней мере, в Chrome, FF и IE), если оно есть.

Примечание: я не говорю об плагинах автозаполнения AJAX, это то, что почти всегда всплывает при поиске этого вопроса.Я имею в виду встроенную в ваш браузер функцию автозаполнения или автозаполнения, которая помогает вам заполнять формы, вспоминая то, что вы вводили в прошлом.

Ответы [ 5 ]

3 голосов
/ 15 апреля 2018

Для тех, кто все еще пытается решить эту проблему, похоже, что я нашел ответ .

Chromium пытается распознать событие отправки, даже если вы предотвращаете и по умолчанию обращаетесьфактическое представление самостоятельно.

Вот и все, вам нужно preventDefault отправить событие, не событие click.

Это работало на Chrome, Edge и IE 11 на момент написания (мне лень скачивать и тестировать его на Firefox).Вот ваша форма: 

<form method="POST" id="my-form">
  <label>Email</label>
  <input autocomplete="email" type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Обратите внимание на атрибут autocomplete.Это все возможные значения , которые вы можете использовать для autocomplete.

. В JavaScript просто сделайте это: 

$("#my-form").on("submit", function (ev) {
  ev.preventDefault();

  // Do AJAX stuff here
});

Браузер запомнит любой ваш адрес электронной почтыВы нажали кнопку подписки.

3 голосов
/ 11 апреля 2013

Я тоже сталкивался с этим; не кажется, что есть отличное решение, конечно, не для кросс-браузерного, но вот для IE я не видел ни одного упоминания: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>

От: http://support.microsoft.com/kb/329156

1 голос
/ 16 января 2015

После нескольких часов поиска я нашел решение в Запустить автозаполнение без отправки формы .

По сути, он использует скрытый iframe на той же странице, задает действие вашей формы для 'src' iframe и добавляет скрытую кнопку отправки внутри формы, когда пользователь нажимает вашу кнопку, которая вызывает запросы AJAX Вы должны программно нажать скрытую кнопку перед отправкой запроса AJAX. см. пример ниже:

На странице формы: 

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

Тогда java скрипт: 

$('#go_button').click(function(event){
    //submit the form to the hidden iframe
    $('#submit_button').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

Надеюсь, это поможет.

1 голос
/ 16 октября 2013

Используйте этот метод: 

AutoCompleteSaveForm = function(form){
    var iframe = document.createElement('iframe');
    iframe.name = 'uniqu_asdfaf';
    iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
    document.body.appendChild(iframe);
    var oldTarget = form.target;
    var oldAction = form.action;
    form.target = 'uniqu_asdfaf';
    form.action = '/favicon.ico';
    form.submit();
    setTimeout(function(){
        form.target = oldTarget;
        form.action = oldAction;
        document.body.removeChild(iframe);
    });
}

Протестировано с ie10, ff новинка, хром новинка

Проверьте себя: http://jsbin.com/abuhICu/1

1 голос
/ 10 февраля 2012

Вы пробовали ответить на мой вопрос, который вы упомянули? В ответе используется скрытый iframe, но, похоже, он утверждает, что идея не работает в IE и Chrome в то время.

Попытайтесь принять идею, и вместо использования скрытого iframe просто поместите видимый элемент ввода username / password / submit в форму POST, в iframe. Таким образом, пользователь будет вводить данные для входа непосредственно в iframe. С надлежащим Javascript вы можете поставить загрузку изображения, получить успех или отказ от сервера и обновить родительскую или целую страницу. Я считаю, что это должно работать в любом браузере.

Или, если вы все еще хотите использовать AJAX, поскольку вы, вероятно, реализовали API на стороне сервера. Вы можете сделать, чтобы iframe просто отправлял фиктивную запись POST, одновременно отправляя реального пользователя / pass на AJAX URL.

Или вернитесь, чтобы использовать скрытый iframe, чтобы не скрывать его, а переместить в невидимую область, например top: -1000px.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...