Sometimes even autocomplete=off won't prevent filling in credentials into wrong fields.
A workaround is to disable browser autofill using readonly-mode and set writable on focus:
The focus event occurs at mouse clicks and tabbing through fields.
Update:
Mobile Safari sets cursor in the field, but does not show virtual keyboard. This new workaround works like before, but handles virtual keyboard:
Live Demo https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
Explanation: Browser auto fills credentials to wrong text field?
filling the inputs incorrectly, for example filling the phone input with an email address
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.
