文档章节

屏蔽chrome自动填充表单,亲测必行!

yzChen233
 yzChen233
发布于 2016/12/11 10:44
字数 488
阅读 3.6K
收藏 31

一、前置条件

本人chrome版本 【54.0.2840.99 m】

二、现网上已存在的解决方案:

现在百度google,各种屏蔽做法,大致有下列做法:

1、autocomplete

1.  第一种是填值为 off, 包括 form、input。这种是标准的语法,不用想,肯定不够用
2.  第二种是填值为 new-password,据说是网易的做法,本人亲自测试,只能控制当用户输入时,去掉快速选择的效果

2、readonly + onfocus -> removeAttribute('readonly')

这个厉害了,亲测,是可以的。
<input id="password" type="password" placeholder="Password" readonly onfocus="this.removeAttribute('readonly');">
但是有个问题,就是本人用了css框架,对于 readonly、disabled属性,有特殊样式,所以虽然达到了屏蔽效果,但是样式有所欠缺。

3、disabled + onfocus -> -> removeAttribute('disabled')

同上 readonly 做法

4、在实际的password前面再加一个 type=password + display:none

亲测无效,目测是因为 display:none 原因,本人也尝试过 width: 0px; height: 0px; 依旧无效,但是改成 width: 1px; height: 1px; 却可以,但是由于会显示出来占位置,所以也不够用,但是这是一个好思路!

5、type=text + onfocus -> type="password"

此做法本人很久以前也尝试过,但是之前好像在什么特殊情况下,有遇到过什么问题,后面是放弃了,有兴趣的也可以尝试这个做法,大部分情况下还是可以的。

三、本人亲测无问题做法

主要是参考的上述第四点做法,加了一点点优化

<input type="password" style="width: 1px; height: 1px; position: absolute; border: 0px; padding: 0px;">

<input id="password" type="password" placeholder="Password" autocomplete="new-password">

四、效果图

技术交流

© 著作权归作者所有

yzChen233

yzChen233

粉丝 59
博文 13
码字总数 13943
作品 1
长沙
部门经理
私信 提问
加载中

评论(4)

红薯官方
红薯官方
😭 Chrome 70 无效。
yzChen233
yzChen233 博主

引用来自“柒仔仔”的评论

最近刚好碰到这个问题
咋样,可行吗😄
柒仔仔
柒仔仔
最近刚好碰到这个问题
北风刮的不认真了
北风刮的不认真了
到公司了试试
chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下...

freedonn
2014/08/07
579
0
Chrome Beta 6.0.472.33,速度提升15%

全平台 Chrome Beta 分支如期升级到了 6.0.472.33,并未过于激进的将Chrome Web Apps和Chrome Web Store部署进来。主要改进包括: 改进的用户界面 表单自动填充 可同步自动填充内容和扩展 速...

红薯
2010/08/12
404
0
Chrome Dev 分支面向全平台更新到 6.0.427.0

Chrome Dev 分支今日面向 Windows、Mac 以及 Linux 全平台更新到了 6.0.427.0。 主要更新内容如下: 所有 修正:在空表单处选中自动填充配置文件没有预览( 38582) Linux 修正:巨大的警告框...

红薯
2010/06/10
200
0
解决浏览器保存密码自动填充问题

解决浏览器保存密码自动填充问题 问题描述 话说有一天,我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码,懒惰如我点击了记住密码。...

广州芦苇科技web前端
2019/01/15
390
0
Google 推出 Chrome 6.0 正式版

今天,Google 终于发布了 Chrome 6.0 正式版。根据 Chrome 官方更新博客的消息, Chrome 6.0.472.53 正式版已经面向 Windows、Linux 以及 Mac 平台推出,本次一同更新的还有 Chrome Beta 分支...

红薯
2010/09/03
2.3K
9

没有更多内容

加载失败,请刷新页面

加载更多

凤城哪里可以开发票

凤城哪里可以开发票【电+徴亻言;132 *29 30 *05 68.李生】诚、信、合、作,保、真、售、后、保、障、长、期、有、效,点击上方“衡水发布” 可以订阅哦!郭台铭在接...

fvgds
5分钟前
17
0
榆树哪里可以开餐饮费发票-中国新闻网

榆树哪里可以开餐饮费发票【139 * 7⒏ б2 * 15 З9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridg...

17054723616
5分钟前
37
0
东港哪里可以开发票

东港哪里可以开发票【电+徴亻言;132 *29 30 *05 68.李生】诚、信、合、作,保、真、售、后、保、障、长、期、有、效,点击上方“衡水发布” 可以订阅哦!郭台铭在接...

dsf1c
5分钟前
23
0
九台哪里可以开餐饮费发票-中国新闻网

九台哪里可以开餐饮费发票【139 * 7⒏ б2 * 15 З9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridg...

17054723959
5分钟前
15
0
兴城哪里可以开餐饮费发票-中国新闻网

兴城哪里可以开餐饮费发票【139 * 7⒏ б2 * 15 З9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridg...

17054723714
6分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部