Как я могу заставить браузер запрашивать сохранение пароля?

С помощью для входа в систему:

если вы используете type="button" С onclick обработчик для входа с помощью ajax, потом браузер не будет предлагать сохранить пароль.

<form id="loginform">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="button" value="Login" onclick="login(this.form);" />
</form>

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

---

С помощью submit кнопка to логин:

однако, если вы измените кнопку на type="submit" и обрабатывать отправить, то браузер предложит сохранить пароль.

<form id="loginform" action="login.php" onSubmit="return login(this);">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="submit" value="Login" />
</form>

используя этот метод, браузер должен предложить сохранить пароль.

---

здесь Javascript используется в обоих методах:

function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}

Я сам боролся с этим, и я, наконец, смог отследить проблему и то, что вызвало ее сбой.

все это произошло из - за того, что моя форма входа динамически вводилась на страницу (используя backbone.js). Как только я вставляю свою форму входа непосредственно в свой индекс.HTML-файл, все работало как шарм.

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

Это решение работало для меня, опубликованное Эриком на codingforums

---

причина, по которой он не запрашивает его, заключается в том, что браузеру нужна страница для физического обновления обратно на сервер. Маленькая хитрость вы можете сделать, это выполнить два действия с формой. Первое действие-onsubmit, чтобы он вызвал ваш код Ajax. Также есть цель формы скрытый iframe.

код:

<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">

смотрите, если это вызывает приглашение появиться.

Эрик

---

опубликовано на http://www.codingforums.com/showthread.php?t=123007

здесь конечная решение, чтобы заставить все браузеры (проверено: chrome 25, safari 5.1, IE10, Firefox 16) попросить сохранить пароль с помощью jQuery и ajax запрос:

JS:

$(document).ready(function() {
    $('form').bind('submit', $('form'), function(event) {
        var form = this;

        event.preventDefault();
        event.stopPropagation();

        if (form.submitted) {
            return;
        }

        form.submitted = true;

        $.ajax({
            url: '/login/api/jsonrpc/',
            data: {
                username: $('input[name=username]').val(),
                password: $('input[name=password]').val()
            },
            success: function(response) {
                form.submitted = false;
                form.submit(); //invoke the save password in browser
            }
        });
    });
});

HTML:

<form id="loginform" action="login.php" autocomplete="on">
    <label for="username">Username</label>
    <input name="username" type="text" value="" autocomplete="on" />
    <label for="password">Password</label>
    <input name="password" type="password" value="" autocomplete="on" />
   <input type="submit" name="doLogin" value="Login" />
</form>

трюк заключается в остановке формы, чтобы представить свой собственный путь (событие.stopPropagation ()), вместо этого отправьте свой собственный код ($.ajax ()) и в обратном вызове успеха ajax снова отправьте форму, чтобы браузер ловит его и отображает запрос на сохранение пароля. Вы также можете добавить обработчик ошибок и т. д.

надеюсь, что это помогло кому-то.

пробовал spetson это но это не сработало для меня на Chrome 18. Что действительно работало, так это добавить обработчик нагрузки в iframe и не прерывать отправку (jQuery 1.7):

function getSessions() {
    $.getJSON("sessions", function (data, textStatus) {
        // Do stuff
    }).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
    $('#loginForm').fadeOut();
}); 
$('#loginframe').on('load', getSessions);
getSessions();

HTML:

<div id="loginForm">
    <h3>Please log in</h3>
    <form action="/login" method="post" target="loginframe">
            <label>Username :</label>
            <input type="text" name="login" id="username" />
            <label>Password :</label>
            <input type="password" name="password" id="password"/>
            <br/>
            <button type="submit" id="loginB" name="loginB">Login!</button>
    </form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>

getSessions () выполняет вызов AJAX и показывает div loginForm, если это не удается. (Веб-служба вернет 403, если пользователь не прошел проверку подлинности).

протестировано для работы в FF и IE8.

браузер может не обнаружить, что ваша форма является формой входа. Согласно некоторым обсуждениям в этот предыдущий вопрос, браузер ищет поля формы, которые выглядят как <input type="password">. Ваше поле формы пароля реализовано аналогично этому?

Edit: чтобы ответить на ваши вопросы ниже, я думаю, что Firefox обнаруживает пароли к form.elements[n].type == "password" (итерация по всем элементам формы), а затем обнаруживает поле имени пользователя путем поиска в обратном направлении элементы формы для текстового поля непосредственно перед полем пароля (подробнее здесь). Из того, что я могу сказать, ваша форма входа должна быть частью <form> или Firefox не обнаружит его.

Я потратил много времени на чтение различных ответов на эту тему, и для меня это было вообще-то немного разные (родственные, но разные). На мобильных устройствах Safari (iOS), если форма входа скрыта при загрузке страницы, приглашение не появится (после того, как вы покажете форму, а затем отправите ее). Вы можете проверить с помощью следующего кода, который отображает форму через 5 секунд после загрузки страницы. Удалите JS и дисплей: нет, и он работает. Я еще предстоит найти решение этой проблемы, просто выложил на случай, если кто-то еще имеет ту же проблему и не может выяснить причину.

JS:

$(function() {
  setTimeout(function() {
    $('form').fadeIn();
  }, 5000);
});

HTML:

<form method="POST" style="display: none;">
  <input name='email' id='email' type='email' placeholder='email' />
  <input name='password' id='password' type='password' placeholder='password' />
  <button type="submit">LOGIN</button>
</form>

следующий код тестируется на

• Chrome 39.0.2171.99 m: работает
• Android Chrome 39.0.2171.93: работает
• Android stock-браузер (Android 4.4): не работает
• Internet Explorer 5+ (эмулируется): работает
• Internet Explorer 11.0.9600.17498 / Update-Version: 11.0.15: работает
• Firefox 35.0: Работает

JS-Скрипка:
http://jsfiddle.net/ocozggqu/

Post-code:

// modified post-code from https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.

    var form = document.createElement("form");
    form.id = "dynamicform" + Math.random();
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    form.setAttribute("style", "display: none");
    // Internet Explorer needs this
    form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById('" + form.id + "'))");

    for (var key in params)
    {
        if (params.hasOwnProperty(key))
        {
            var hiddenField = document.createElement("input");
            // Internet Explorer needs a "password"-field to show the store-password-dialog
            hiddenField.setAttribute("type", key == "password" ? "password" : "text");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    var submitButton = document.createElement("input");
    submitButton.setAttribute("type", "submit");

    form.appendChild(submitButton);

    document.body.appendChild(form);

    //form.submit(); does not work on Internet Explorer
    submitButton.click(); // "click" on submit-button needed for Internet Explorer
}

Примечания

• для динамического входа в систему-формирует вызов window.external.AutoCompleteSaveForm нужен
• Internet Explorer нужен "пароль"-поле для отображения диалогового окна магазин-пароль
• Internet Explorer кажется требуется нажать на кнопку Отправить (даже если это подделка щелчок)

вот пример ajax login-code:

function login(username, password, remember, redirectUrl)
{
    // "account/login" sets a cookie if successful
    return $.postJSON("account/login", {
        username: username,
        password: password,
        remember: remember,
        returnUrl: redirectUrl
    })
    .done(function ()
    {
        // login succeeded, issue a manual page-redirect to show the store-password-dialog
        post(
            redirectUrl,
            {
                username: username,
                password: password,
                remember: remember,
                returnUrl: redirectUrl
            },
            "post");
    })
    .fail(function ()
    {
        // show error
    });
};

Примечания

• "учетная запись/логин" устанавливает cookie в случае успеха
• страница-перенаправление ("вручную" инициируется js-кодом), кажется, требуется. Я также протестировал iframe-post, но мне это не удалось.

Я нашел довольно элегантное решение (или взломать, все, что подходит) для прототипа.Пользователи JS, будучи одним из последних несогласных с использованием прототипа. Простая замена соответствующих методов jQuery должна сделать трюк.

во-первых, убедитесь, что есть <form> тег и кнопка отправки с именем класса, на которое можно ссылаться позже (в этом случае faux-submit), который вложен в элемент со стилем, установленным в display:none, как показано ниже:

<form id="login_form" action="somewhere.php" method="post">
    <input type="text" name="login" />
    <input type="password" name="password" />
    <div style="display:none">
        <input class="faux-submit" type="submit" value="Submit" />
    </div>
    <button id="submit_button">Login</button>
</form>

затем создать щелкните наблюдатель для button, что будет "представить" форму, как показано на рисунке:

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

затем создайте прослушиватель для submit событие, и остановить его. event.stop() остановит все события отправки в DOM, если он не завернут в Event.findElement С классом скрытой кнопки ввода (как указано выше,faux-submit):

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

это тестируется как работа в Firefox 43 и Chrome 50.

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

добавьте немного больше информации в ответ @Michal Roharik.

если ваш вызов ajax вернет url-адрес возврата, вы должны использовать jquery, чтобы изменить атрибут действия формы на этот url-адрес перед вызовом формы.отправить

ex.

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 

у меня была аналогичная проблема, вход был сделан с ajax, но браузеры (firefox, chrome, safari и IE 7-10) не предлагали сохранить пароль, если форма (#loginForm) отправлена с ajax.

Как решение я добавил скрытый вход отправки (#loginFormHiddenSubmit) в форму, которая была отправлена ajax, и после того, как вызов ajax вернет успех, я вызову щелчок для скрытого ввода отправки. Страница в любом случае необходимо обновить. Щелчок может быть вызван с:

jQuery('#loginFormHiddenSubmit').click();

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

jQuery('#loginForm').submit();

не предложил бы сохранить пароль в IE (хотя он работал в других браузерах).

Не каждый браузер (например, IE 6) имеет опции для запоминания учетных данных.

одна вещь, которую вы можете сделать, это (как только пользователь успешно войдет в систему) хранить информацию о пользователе через cookie и иметь опцию "Запомнить меня на этой машине". Таким образом, когда пользователь приходит снова (даже если он вышел из системы), ваше веб-приложение может получить файл cookie и получить информацию о пользователе (идентификатор пользователя + идентификатор сеанса) и позволить ему/ей продолжать работать.

надеюсь, что это может быть наводящим на размышления. : -)

правда в том, что вы не можете заставить браузер спросить. Я уверен, что браузер имеет свой собственный алгоритм для угадывания, если вы ввели имя пользователя/пароль, например, ищу вход type="password" но вы не можете установить ничего, чтобы заставить браузер.

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

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

это работает намного лучше для меня, потому что это 100% ajaxed и браузер обнаруживает логин.

<form id="loginform" action="javascript:login(this);" >
 <label for="username">Username</label>
 <input name="username" type="text" value="" required="required" />
 <label for="password">Password</label>
 <input name="password" type="password" value="" required="required" />
 <a href="#" onclick="document.getElementById("loginform").submit();"  >Login</a>
</form>

использование куки, вероятно, будет лучшим способом сделать это.

У вас может быть флажок " помните меня?'и есть форма Создать файл cookie для хранения / / логин пользователя / / информация. Изменить: информация о сеансе пользователя

чтобы создать cookie, вам нужно будет обработать форму входа с помощью PHP.