Turning Off Autocomplete in Chrome with?React

tl;dr?Add a hidden input with an arbitrary?value?attribute at the top of the form,then set semantic values for the?autocomplete?property on the input fields for which you wish to disable autocomplete.

If you’re anything like me,you’ve just spent hours attempting to get Chrome to respect your?autocomplete=”off”?property on a form input. It’s one of those bizarre and annoying front-end quirks that can drive you to the brink of insanity. You’ve Googled the issue,tried the suggestions on every blog you’ve seen,and nothing works. Hopefully I have the answer for you.

I encountered this issue on a simple login form: one email input,and one password input. I tried setting?autocomplete=”off”?on the form level,on the input level,and on both levels. I tried putting these tags above the “real” ones:

None of that worked for me.

Eventually,I found?this Chromium issue?and tried the suggestion there,which was to put some arbitrary value in the autocomplete field. Unfortunately,when React rendered the HTML,it seemed that any value I put in the?autoComplete?property,was being transformed to “off”.

Like Aaron Rodgers in the 4th quarter,I threw up a Hail Mary,and tried sticking this in at the top of my form:

…

Success!

I refreshed a few times,just to make sure,and to my relief,the autofill nightmare was over… until I changed the?autoComplete?values in my JSX back to “off”.

As I mentioned before,when I tried using semantic values as suggested by the Chromium developers,the HTML rendered by React seemed to ignore them,and stick in “off” no matter what input I gave it.

?

?

Well,on some level,that’s not entirely true. I don’t really understand what’s going on yet,but I know this:

If I set?autoComplete=”off”?in my JSX,Chrome will autofill the fields.

If I set semantic values for?autoComplete?AND include this tag at the top of my form…

…Chrome will not autofill the fields.

Chrome is obviously reading the?autocomplete?values passed into it,then changing them for some reason.

Ahh,the joys of front-end development.

?

文章来自：https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908