文档章节

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

倚楼听风雨_
 倚楼听风雨_
发布于 2016/12/11 10:44
字数 463
阅读 2510
收藏 30
点赞 2
评论 3

一、前置条件

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

四、效果图

© 著作权归作者所有

共有 人打赏支持
倚楼听风雨_
粉丝 51
博文 10
码字总数 8701
作品 1
长沙
加载中

评论(3)

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

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

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

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

freedonn
2014/08/07
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
解决浏览器自动填充表单问题

解决浏览器自动填充表单问题 X-Space2017-12-241 阅读 表单浏览器 Mozilla 官方文档建议 Mozilla developer documentation 建议使用表单设置属性 tautocomplete=”off” 来阻止浏览器从cache...

X-Space
2017/12/24
0
0
css杂类收集

单行不换行显示 需要设置宽度/或者最大宽度 width:xxxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 如果想要设计input 输入框的边框格式 需要手动添加边框 border:1px s...

bosscheng
2015/10/21
83
0
如何禁止(表单)用户名、密码自动填充

Html登录表单经常被自动填充,有的甚至用户从来没有登录过的网站也会有自动填充,甚是让人讨厌。 Mozilla developer documentation 建议使用表单设置属性 tautocomplete="off" 来阻止浏览器从...

WolfX
2016/02/20
18
0
阻止浏览器自动填充表单

在开发中涉及交易密码验证,但浏览器会自动填充表单。很自然的想到autocomplete属性。 HTML5 <form> autocomplete属性 HTML5 <input> autocomplete属性 以上两种方式在某些浏览器无效!比如:...

JackyCoder
2016/11/15
10
0
屏蔽鼠标右键的JS代码,兼容IE6 IE7 IE8 Firefox Chrome

屏蔽鼠标右键的JS代码,兼容IE6 IE7 IE8 Firefox Chrome 我转载的这篇文章,实际应用了一下并验证了在IE8,Firefox 6.0.2,chrome14.0.835版本中的确有效果。 <!DOCTYPE html PUBLIC "-//W3...

LionelShen
2011/09/19
0
0
ajax在firefox中提交数据报NS_ERROR_DOCUMENT_NOT_CACHED错误

起因 为了仿真接口的返回数据,组里写了一个自动填充数据页面,每次走到这个页面都需要人工点击返回。页面上有2个form,target都指向self, 今天写了一个利用js分别提交这2个表单的实现,功能...

MerKerXu
2013/07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
9
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
4
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
176
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部