React中autoComplete="off" 失效

最新推荐文章于 2025-06-18 09:00:01 发布

weixin_30546189

最新推荐文章于 2025-06-18 09:00:01 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/boyuguoblog/p/9173982.html

本文介绍了一种解决Chrome浏览器中React表单自动填充问题的方法。通过在表单顶部添加隐藏输入框并设置特定属性，可以有效防止浏览器自动填充表单字段。

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.