Monday, June 27, 2016

Autocomplete off not working in firefox safari chrome or ie11

Browser does not care about autocomplete=off auto or even fills credentials to wrong text field?
I fixed it by setting the password field to read-only and activate it, when user clicks into it or uses tab-key to this field. fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields).

If you use autocomplete="off" or autocomplete="false" modern browser will Ignore it. How can solve this problem. Simply make your input readonly, and on focus, remove it. This is a very simple approach and browsers will not populate readonly inputs. Therefore, this method is accepted and will never be overwritten by future browser updates. 
<input type="password" onfocus="$(this).removeAttr('readonly');" readonly/>
Style your input accordingly so that it does not look like a readonly input
input[readonly] {
     cursor: text;
     background-color: #fff;
}
By the way, more information on my observation:
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 itautofills 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.

How to practice tutorials…

  • Make a team with your friends (Member should be 4/5).
  • Start to practice one tutorial series along with them.
  • Don’t try to collect source code. Type the code while watching the tutorial.
  • If you face any problem, discuss with team members to solve quickly.