文档章节

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

倚楼听风雨_
 倚楼听风雨_
发布于 2016/12/11 10:44
字数 463
阅读 3241
收藏 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">

四、效果图

© 著作权归作者所有

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

倚楼听风雨_

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

评论(4)

蓝水晶飞机
蓝水晶飞机
😭 Chrome 70 无效。
倚楼听风雨_
倚楼听风雨_

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

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

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

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

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

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

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

红薯
2010/06/10
191
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
现在通过铁道部网站订票就更容易了,亲测成功!!!

http://www.iteye.com/topic/1119694 12306 订票助手 1.3.1 功能 支付方式需网银支持google浏览器支付,目前成功使用招商银行手机支付购票成功 自动尝试登录,登录成功提示 根据条件自动查票...

DanielTo
2012/01/11
380
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
7
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部