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

React中autoComplete="off" 失效的更多相关文章

  1. js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

  2. react中使用map时onClick事件失效

    分享一些踩过的坑 react中使用map时onClick事件失效 <span> { count.map( (item,index)=>{ return <span style= ...

  3. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  4. React中禁止chrome填充密码表单

    当 input 的 type="password" 时,chrome浏览器会以 type="password" 为标识记住输入的用户名和密码, 如果chrome ...

  5. react中的jsx详细理解

    这是官网上的一个简单的例子 const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDO ...

  6. 【React】377- 实现 React 中的状态自动保存

    点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

  7. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  8. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  9. 有关表单autocomplete = "off" 失效问题解决方案

    一.autocomplete介绍 autocomplete是Html5中的新属性.该属性规定输入字段是否应该启用自动完成功能.自动完成允许浏览器预测对字段的输入.当用户在字段开始键入的时候,浏览器基于 ...

随机推荐

  1. Git详解使用教程

    一. 什么是Git Git(读音为/gɪt/).是一个开源的 分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux ...

  2. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

  3. Docker swarm集群增加节点和删除节点

    Docker swarm集群增加节点 docker swarm初始化 docker swarm init docker swarm 增加节点 在已经初始化的机器上执行:# docker swarm j ...

  4. GitHub和Git

    GitHub托管项目代码 首先一些基本概念: repository(仓库) 用来存放项目代码,每个项目代表一个仓库,开一个项目就意味着你有一个仓库. star(收藏) 收藏方便下次查找. fork(复 ...

  5. jenkins手把手教你从入门到放弃01-jenkins简介(详解)

    一.简介 jenkins是一个可扩展的持续集成引擎.持续集成,也就是通常所说的CI(Continues Integration),可以说是现代软件技术开发的基础.持续集成是一种软件开发实践, 即团队开 ...

  6. lqb 基础练习 十六进制转八进制 (字符串进行进制转化)

    基础练习 十六进制转八进制 时间限制:1.0s   内存限制:512.0MB     问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的第一行为一个正整数n (1<=n ...

  7. nyoj 35-表达式求值(stack, 栈的应用)

    35-表达式求值 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:37 submit:53 题目描述: ACM队的mdd想做一个计算器,但是,他要做的 ...

  8. 力扣(LeetCode)种花问题 个人题解

    假设你有一个很长的花坛,一部分地块种植了花,另一部分却没有.可是,花卉不能种植在相邻的地块上,它们会争夺水源,两者都会死去. 给定一个花坛(表示为一个数组包含0和1,其中0表示没种植花,1表示种植了花 ...

  9. 力扣(LeetCode)移除元素 个人题解

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  10. drf序列化组件之视图家族

    一.视图家族的分类 1.导入分类 from rest_framewok import views, generics, mixins, viewsets views:视图类 ​ 两大视图类:APIVi ...