Google chrome autofilling all password inputs
In HTML5 with autocomplete attribute there is a new property called "new-password" which we can use to over come this issue. Following works for me.
<input id="userPassword" type="password" autocomplete="new-password">current-password : Allow the browser or password manager to enter the current password for the site. This provides more information than "on" does, since it lets the browser or password manager know to use the currently-known password for the site in the field, rather than a new one.
new-password :Allow the browser or password manager to automatically enter the new password for the site. This might be automatically generated based on the other attributes of the control, or might simply tell the browser to present a "suggested new password" widget of some kind.
Refer: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
This can be solved without hacks, but it is not necessarily intuitive. There are two weird decisions that Chrome makes. First, Chrome ignores autocomplete="off" in its parsing, and second, Chrome assumes the field that comes before a password field must be a username/email field, and should be autocompleted as such.
There are ways around this though that leverage the HTML5 autocomplete attribute spec.
As you will see in the link below, there are standard values for the attribute autocomplete. To avoid having Chrome assuming the field before a password is an email field, use either one of the official values (e.g., tel for a phone number), or make up a value that does not exist on the list, but is also not off or false.
Google suggests you use one of the standard values with new- prepended to the value, e.g., autocomplete="new-tel". If you want a password field to not autocomplete, you can use autocomplete="new-password", for instance.
While technically you could of course make the attribute something random without context to the same effect (e.g. autocomplete="blahblahblah"), I recommend the new- prefix as it helps give any future developer working on your code some context of what you're accomplishing with this attribute.
Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.
Fix: browser autofill in by readonly-mode and set writable on focus
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>(focus = at mouse click and tabbing through fields)
Update:Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly'); // fix for mobile safari to show virtual keyboard this.blur(); this.focus(); }" />Live Demo https://jsfiddle.net/danielsuess/n0scguv6/// UpdateEnd
Explanation: Browser auto fills credentials to wrong text field?
@Samir: Chrome auto fills any input with a type of password and then whatever the input before it is
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it,
This readonly-fix above worked for me.