React中autoComplete="off" 失效
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" 失效的更多相关文章
- 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 ...
- react中使用map时onClick事件失效
分享一些踩过的坑 react中使用map时onClick事件失效 <span> { count.map( (item,index)=>{ return <span style= ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- React中禁止chrome填充密码表单
当 input 的 type="password" 时,chrome浏览器会以 type="password" 为标识记住输入的用户名和密码, 如果chrome ...
- react中的jsx详细理解
这是官网上的一个简单的例子 const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDO ...
- 【React】377- 实现 React 中的状态自动保存
点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...
- React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- 有关表单autocomplete = "off" 失效问题解决方案
一.autocomplete介绍 autocomplete是Html5中的新属性.该属性规定输入字段是否应该启用自动完成功能.自动完成允许浏览器预测对字段的输入.当用户在字段开始键入的时候,浏览器基于 ...
随机推荐
- python_day1(初始Python)
1.编码 ASCII (英文1字节,没中文)=> GB => GBK =>uncoode (中英文都2字节) => utf-8 (可变长字节储存,中文3字节,英文1字节) 2. ...
- Git如何fork别人的仓库并作为贡献者提交代码
例如 要fork一份google的MLperf/inference代码,下面介绍具体做法:预备知识git里的参考有几种表示,分别是上游仓库,远程仓库和本地仓库,逻辑关系如下拉取代码的顺序:别的大牛的代 ...
- Ansible之入门简介
一.ansible简介 ansible是一款由python语言编写的一款自动化运维工具,它集合了众多运维工具(puppet.cfengine.chef.func.fabric)优点,实现了批量系统配置 ...
- Python3.7.1学习(一):redis的连接和简单使用
1.python 利用 redis 第三方库 首先安装:pip install redis 2.reids的连接 Redis使用StrictRedis对象来管理对一个redis server 的所有连 ...
- jeson navo
QT TEMPLATE = app CONFIG += console c++11 CONFIG -= app_bundle CONFIG -= qt INCLUDEPATH += /usr/loca ...
- Linux安装telnet C/S 【白话文】
1.安装telnet 和telnet-server yum -y install telnet yum -y install telnet-server 注意:在此安装过程中,会依赖解决xinetd的 ...
- ubuntukylin16.04LTS(乌班图麒麟版长期支持版,并非银河麒麟)安装体验
最近,国产银河麒麟版在政府部门推广使用.我有幸接触了,感觉还是不错的.这次政府软件正版化整改中,也列入了windows和银河麒麟的选项.我想试安装一下,可是没找到.就近找了它的类似系统ubuntuky ...
- 你必须知道的容器日志 (2) 开源日志管理方案 ELK
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.上一篇<你必须知道的容器日志(1)>中介绍了Docker自带的log ...
- (三十六)golang--文件的基本操作
文件程序中是以流的形式操作的. 流:数据在数据源(文件)和程序(内存)之间经历的路径: 输入流:数据从数据源到程序的路径: 输出流:数据从程序到数据源的路径: 常用的文件操作和函数: 1.常用的文件操 ...
- 高性能消息队列(MQ)Kafka 简单由来介绍(1)
Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据. 这种动作(网页浏 ...