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