Sometimes even autocomplete=off would not prevent to fill in credentials into the wrong fields, but not a user or nickname field.
This workaround is in addition to apinstein's post about browser behavior.
Fix browser autofill in read-only and set writable on focus (click and tab)
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Update:
Mobile Safari sets cursor in the field, but it does not show the virtual keyboard. The new fix works like before, but it handles the 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
Because the browser auto fills credentials to wrong text field!?
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 auto fills (just guessing due to observation) the nearest textlike-input field, that appears prior the password field in the DOM. As the browser is the last instance and you can not control it.
This readonly-fix above worked for me.