Let's say I have a login form like this:
<form>
<input type="email">
<input type="password">
</form>
Google Chrome (and other browsers) are able to offer saving my email and password without any problems. Also Chrome autofills this kind of form on page load without any problems.
I need to develop a feature, that "remembers" last user via localstorage and shows some fancy UI that also includes their name and email and only asks for password this time:
<div>Welcome our old customer Umut (remembered@email.com)</div>
<form>
<input type="hidden" value="remembered@email.com">
<input type="password">
</form>
This time, Chrome doesn't autofill password on pageload but when user focus into this field, they get a choice of users first:
I wonder, if there is a way to tell browser that, I already have an email selected, and I want password for that email to be autofilled on page load.
Cross browser if possible.
PS. If I don't use hidden
type on email, instead only make it invisible to user (using display:none), Chrome autofills both email and password. This means that, an invisible email filed is overriden by the value Google Chrome 'remembered'. So even you see remembered@email.com
as fancy custom design, both email and password are modified by Chrome.