[ajax] 비밀번호를 저장하라는 메시지를 브라우저에 표시하려면 어떻게해야합니까?

이 질문에 대한 완벽한 해결책을 찾았습니다. (Chrome 27 및 Firefox 21에서 이것을 테스트했습니다).

알아야 할 두 가지가 있습니다.

1. ‘비밀번호 저장’을 트리거하고
2. 저장된 사용자 이름 / 암호 복원

1. ‘비밀번호 저장’을 트리거하십시오.

들어 파이어 폭스 (21) 가 제출 입력 텍스트 필드 비밀번호 입력 필드를 포함하는 양식이 있음을 감지 할 때, ‘암호 저장’가 시작됩니다. 그래서 우리는 단지 사용해야합니다

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin()event.preventDefault()양식을 제출하여 원래 리디렉션 을 차단하는 동안 Ajax 로그인 및 로그인 페이지로 다시로드 / 리디렉션을 수행합니다 .

Firefox 만 다루는 경우 위의 솔루션으로 충분하지만 Chrome 27에서는 작동하지 않습니다. 그런 다음 Chrome 27에서 ‘비밀번호 저장’을 트리거하는 방법을 묻습니다.

들어 크롬 27 , ‘암호 저장’는 트리거 후 가 입력 텍스트 필드를 포함하는 양식을 제출하여 페이지로 리디렉션되는 속성 이름 = ‘이름’으로 입력 암호 필드 속성 이름 = ‘비밀번호’와를 . 따라서 양식 제출로 인해 리디렉션을 차단할 수 없지만 ajax 로그인을 완료 한 후 리디렉션을 수행 할 수 있습니다. (아약스 로그인으로 페이지를 다시로드하지 않거나 페이지로 리디렉션하지 않으려면 불행히도 내 솔루션이 작동하지 않습니다.) 그런 다음 사용할 수 있습니다

<form id='loginForm' action='signedIn.xxx' method='post'>
    <input type='text' name='username'>
    <input type='password' name='password'>
    <button id='loginButton' type='button'>Login</button>
</form>
<script>
    $('#loginButton').click(someFunctionForLogin);
    function someFunctionForLogin(){
        if(/*ajax login success*/) {
            $('#loginForm').submit();
        }
        else {
            //do something to show login fail(e.g. display fail messages)
        }
    }
</script>

type = ‘button’인 단추는 단추를 클릭 할 때 양식이 제출되지 않도록합니다. 그런 다음 아약스 로그인을 위해 버튼에 기능을 바인딩합니다. 마지막으로 호출 $('#loginForm').submit();하면 로그인 한 페이지로 리디렉션됩니다. 로그인 한 페이지가 현재 페이지 인 경우 ‘signedIn.xxx’를 현재 페이지로 바꾸어 ‘새로 고침’을 수행 할 수 있습니다.

이제 Chrome 27의 방법은 Firefox 21에서도 작동합니다. 따라서 사용하는 것이 좋습니다.

2. 저장된 사용자 이름 / 암호를 복원하십시오.

loginForm을 HTML로 하드 코딩 한 경우 loginForm에 저장된 비밀번호를 복원하는 데 아무런 문제가 없습니다.
그러나 저장된 사용자 이름 / 암호는 문서가로드 될 때만 바인드되기 때문에 js / jquery를 사용하여 loginForm을 동적으로 만드는 경우 저장된 사용자 이름 / 암호는 loginForm에 바인드되지 않습니다.
따라서 loginForm을 HTML로 하드 코딩하고 js / jquery를 사용하여 loginForm을 동적으로 이동 / 표시 / 숨겨야했습니다.

비고 :
아약스 로그인을하는 경우 autocomplete='off'와 같은 태그 형태로 추가하지 마십시오

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' 사용자 이름 / 암호를 ‘자동 완성’하도록 허용하지 않기 때문에 loginForm에 사용자 이름 / 암호 복원이 실패합니다.

답변

<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>

<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>

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
}

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

$(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
            }
        });
    });
});

<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>

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();

<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>