Disabling Safari autofill on usernames and passwords

Question

You might already know, that Safari has a nasty autofill bug where it fills email, username and password fields no matter if you set autocomplete=\"off\" or not

Answer 1

Fix: browser autofill in by readonly-mode and set writable on focus

(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:

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explanation: Browser auto fills credentials to wrong text field?

Ok, you just noticed that:

Safari autofill kicks in. No matter [what the fields are named] @Jari

and there's an assumption that:

Safari seems to look for an input field with password and username and always tries to fill it @user3172174

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,

sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

This readonly-fix above worked for me.