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中的新属性.该属性规定输入字段是否应该启用自动完成功能.自动完成允许浏览器预测对字段的输入.当用户在字段开始键入的时候,浏览器基于 ...
随机推荐
- Project Euler 59: XOR decryption
计算机上的每个字母都对应一个独特的编号,普遍接受的标准是ASCII(美国信息交换标准代码).例如,大写字母的A的ASCII码是65,星号(*)的ASCII码是42,而小写字母k的代码是107. 一种现 ...
- Unity中用Mesh画一个圆环
Probuider 前几天在做一个小项目的时候,用到了Unity自带的一个包ProBuilder其中的Arch生成1/4圆. 挺好玩的,可以在直接Unity中根据需要用Mesh定制生成图形,而不用建模 ...
- 201871010114-李岩松《面向对象程序设计(java)》第十周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- PHP+Swoole并发编程的魅力
PHP语言是一个短生命周期的Web编程语言,很多PHPer已经形成了fpm下编程的思维定势.实际上在Swoole出现之后,这种串行化编程的模式早已被打破.使用Swoole完全可以轻易实现更灵活的并发编 ...
- 力扣(LeetCode)删除排序链表中的重复元素 个人题解
给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 这题思路比较简单,同样是快慢针的思路. 用一个整数类型val对应最新的只出现过一次的那个值, 如果节点的下一个节点的值和这个对应则不做别 ...
- B0宏
在编译android平台用的ffmpeg时,抛出这样一个错误: 这句代码怎么看都找出有毛病,为什么B0会报错? 翻看aaccoder.c,也没有发现问题.为什么B0就成了一个常量数字,这里只有一个可能 ...
- element表格点击行即选中该行复选框
关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...
- var与let与const
var与let与const都是用来声明变量,但是三者之间也有一些区别 var的使用 var a;//声明变量a var a,b,c;//声明三个变量a,b,c var a,b,c=2;//声明了三个变 ...
- web前端开发面试题(Vue.js)
1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? ...
- JavaScript笔记十二
1.DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式: 语法:元素.style.样式名 - 例子: 元素.style.width 元素.sty ...