React中autoComplete="off" 失效

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!

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:

autoComplete=”off” in my JSX, Chrome will autofill the fields.

autoComplete AND include this tag at the top of my form…

…Chrome will not autofill the fields.

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

以上是 React中autoComplete="off" 失效 的全部内容, 来源链接: utcz.com/z/382413.html

回到顶部