Firefox 30 ignores autocomplete="off"
for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:
- The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
- We are the third browser to implement this change, after IE and Chrome.
According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete
prevents form data from being cached in older browsers.
<input type="text" name="foo" autocomplete="off" />
I found a complete solution for this question. (I've tested this in Chrome 27 and Firefox 21).
There are two things to know:
- Trigger 'Save password', and
- Restore the saved username/password
1. Trigger 'Save password':
For Firefox 21, 'Save password' is triggered when it detects that there is a form containing input text field and input password field is submitted. So we just need to use
$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin()
does the ajax login and reload/redirect to the signed in page while event.preventDefault()
blocks the original redirection due to submitting the form.
If you deal with Firefox only, the above solution is enough but it doesn't work in Chrome 27. Then you will ask how to trigger 'Save password' in Chrome 27.
For Chrome 27, 'Save password' is triggered after it is redirected to the page by submitting the form which contains input text field with attribute name='username' and input password field with attribute name='password'. Therefore, we cannot block the redirection due to submitting the form but we can make the redirection after we've done the ajax login. (If you want the ajax login not to reload the page or not to redirect to a page, unfortunately, my solution doesn't work.) Then, we can use
<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>
Button with type='button' will make the form not to be submitted when the button is clicked.
Then, binding a function to the button for ajax login. Finally, calling $('#loginForm').submit();
redirects to the signed-in page. If the signed-in page is current page, then you can replace 'signedIn.xxx' by current page to make the 'refresh'.
Now, you will find that the method for Chrome 27 also works in Firefox 21. So it is better to use it.
2. Restore the saved username/password:
If you already have the loginForm hard-coded as HTML, then you will found no problem to restore the saved password in the loginForm.
However, the saved username/password will not be bind to the loginForm if you use js/jquery to make the loginForm dynamically, because the saved username/password is bind only when the document loads.
Therefore, you needed to hard-code the loginForm as HTML and use js/jquery to move/show/hide the loginForm dynamically.
Remark:
If you do the ajax login, do not add autocomplete='off'
in tag form like
<form id='loginForm' action='signedIn.xxx' autocomplete='off'>
autocomplete='off'
will make the restoring username/password into the loginForm fails because you do not allow it 'autocompletes' the username/password.
Best Answer
You can use HTML5 SessionStorage (window.sessionStorage). You will generate a random id and save in session Storage per Browser Tab. Then each browser tab has his own Id.