文档章节

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

倚楼听风雨_
 倚楼听风雨_
发布于 2016/12/11 10:44
字数 463
阅读 3074
收藏 30

一、前置条件

本人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">

四、效果图

© 著作权归作者所有

共有 人打赏支持
倚楼听风雨_

倚楼听风雨_

粉丝 53
博文 10
码字总数 8701
作品 1
长沙
私信 提问
加载中

评论(3)

倚楼听风雨_
倚楼听风雨_

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

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

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

freedonn
2014/08/07
0
0
Chrome Inspect调试stetho出现空白的解决方法

stetho可以使用chrome调试webview,有网友反映国内不行,亲测了一下是有解决方法的: Chrome://inspect 打开后会发现stetho的页面: 点击inspect,如果没有Fan墙或使用离线开发者工具包,会出...

slmk
08/21
0
0
初体验Google Chrome 2——优点和失望之处

关键词:Google | 感谢ydj9931的提供 五月二十一日,Google发布了新版Chrome,声称做了一些实质性的改进,速度也有所提高。我从Chrome v2发布以来就在使用它,总体上还是很喜欢它,但是也有某...

晨曦之光
2012/03/09
0
0
macOS 下 Chrome 如何关闭自动更新

最近升级的 Chrome v67.0.3396.62 在 macOS 下有 bug,打开一些页面,出现持续的高 CPU 占用问题,估计要到下一个版本修复。 在官方发布 fix 之前,我们可以先回退到 v66.x 版本(点这里),...

whoru
06/05
0
0
用karma测试angularjs应用

说来惭愧,研究angularjs也有一段时间了,却一直抛弃了angularjs最大的好处之一——测试。这个周末下决心研究下怎么用给angularjs应用做测试。 安装karma 其实,这么久以来一直没用到angular...

赵小笨
2013/09/15
0
4

没有更多内容

加载失败,请刷新页面

加载更多

MySQL 数据库中间件 MyCAT 基础解析

前言 网络应用持续扩张的过程中,为了处理海量数据往往首先遇到的挑战就是数据存储的扩展 数据存储的扩展一般以切分来实现,切分的技术实现又可分为垂直切分和水平切分: 以表(或Schema)为切...

PeakFang-BOK
31分钟前
1
0
Linux Mysql 安装

https://www.cnblogs.com/xinjing-jingxin/p/8025805.html

流氓兔-
57分钟前
1
0
GlusterFS强制删除节点

GlusterFS中,修改了节点名称,导致找不到了,想删除掉重新加入。 没想到,gluster peer detach server02方法失败,竟然用了各种方法都删除不掉,提示节点无效(废话!有效的我还要删除么?!...

openthings
今天
3
0
光纤技术取得突破,互联网速度或可提高100倍

据外媒报道,近日发表在《自然通讯》上的一篇文章称,通过检测扭曲成螺旋状的光线,互联网速度可以提高 100 倍。这项研究可用于轻松升级现有的网络,大幅提高传输效率。 光纤线缆使用光脉冲来...

linux-tao
今天
2
0
day150-2018-11-17-英语流利阅读-待学习

歪果仁也疯狂:海外版抖音的征途 毛西 2018-11-17 1.今日导读 海外版抖音 TikTok 于 2017 年 5 月上线海外,至今覆盖全球 150 多个国家和地区,月活跃用户数已突破 5 亿。然而,“出海”的抖...

飞鱼说编程
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部