google chrome浏览器自动填充解决方案
在chrome浏览器中,浏览器对于[1]type为password和text的、[2]带有name或者id属性的<input>标签会有自动填充表单功能,虽然会给用户记住密码带来一定的便利,但是对于布局会有一定的bug。因此更多时候,开发人员选择取消这一功能。
查询各种资料总结出来的方案有:
1. 添加 autocomplete='off' 属性,不让浏览器自动填充。(验证失效)
2. 添加 autocomplete='new-password' ,参考自网易邮箱登录的处理方式。(验证失效)
3. 添加 readonly='readonly' 或者 disabled='disabled' 属性。(可用,但是填充功能需要监听focus)。
4. 在<input id='ipt' 或者 name='ipt' value='' /> 标签之前写一个同样的标签,<input id='ipt' name='ipt' value='' style='display:none'>,使得自动填充作用于未显示的元素上。(有效)
4. 去掉name和id属性,使用class来作为选择器的替代,不会进行自动填充。(亲测 chrome 69 有效)
综上,如果不想要填充功能,去除name和id属性是最简单有效的方法。
google chrome浏览器自动填充解决方案的更多相关文章
- input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。
user-block-name, .user-block-pwd { margin-bottom: 10%; text-align: center; position: relative; } .us ...
- chrome浏览器自动填充失效问题
现在浏览器带有自动填充,一般在input标签中增加autocomplete="off" 可以进行控制,off代表不填充,on代表填充,这个属性也可以放在form标签中,对所有的in ...
- 解决chrome浏览器自动填充密码
chrome会自动填充密码,解决方法很简单 使用下面的参考代码即可: <input type="password" readonly οnfοcus="this.r ...
- Chrome浏览器自动填充<input>标签的密码
问题:登录页面登录时,Chrome浏览器保存了用户名和密码,在其他页面管理其他的账户和密码时,密码框先是显示正确的密码,然后一闪而过被覆盖. 原因:问了技术主管才得知,Chrome浏览器中的,保存用户 ...
- 禁止chrome浏览器自动填充表单的解决方案
经过测试,对chrome42,重写input: auto-fill样式不起作用,加上autocomplete="off"也不起作用. 因此使用了两个隐藏的输入框: <inpu ...
- 详解Google Chrome浏览器(操作篇)(下)
开篇概述 由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容.对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即 ...
- 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 详解Google Chrome浏览器(操作篇)(上)
开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...
- Ubuntu 14.04 LTS下安装Google Chrome浏览器
在Ubuntu 14.04下安装Google Chrome浏览器非常简单,只要到Chrome的网站下载Deb安装包并进行安装即可.当然你也可以使用APT软件包管理器来安装Google Chrome浏览 ...
随机推荐
- java格式化数字、货币、金钱
网上摘来的,以后可能会用到 java开发中经常会有数字.货币金钱等格式化需求,货币保留几位小数,货币前端需要加上货币符号等.可以用java.text.NumberFormat和java.text.De ...
- 初步认识ASP.NET WebForm
C#可已进行以下两大类的开发 一.客户端应用程序C/S 主要有两种开发技术: 1.winForm windows窗体应用程序 2.WPF微软新一代图形框架 MFC(比较老的开发技术) MVVM(客户端 ...
- php学习笔记-elseif
<?php if(condition1) { func1(); }elseif(condition2) { func2(); }else { func3(); } ?> elseif需要明 ...
- C语言-郝斌笔记-002病毒程序示范
病毒程序示范 /* 龌龊的程序! */ # include <stdio.h> # include <windows.h> # include <malloc.h> ...
- EZOJ #77
传送门 分析 一个比较神奇的思路 我们考虑分治,对于每一个区间[le,ri]我们计算这个区间中左端点属于[le,mid],右端点属于[mid+1,ri]的情况对答案的贡献 我们求左半个区间的最大最小值 ...
- [转]JSP中的编码设置
转至:http://blog.csdn.net/XinVSYuan/article/details/3864853 1. pageEncoding:<%@ page pageEncoding=& ...
- Java50道经典习题-程序35 最大最小交换
题目:输入数组,最大的与第一个元素交换,最小的与最后一个元素交换,输出数组.分析: 例如输入6 4 8 3 9 7 交换后输出9 4 8 7 6 3 import java.util.Arrays; ...
- POJ - 2528Mayor's posters (离散化+线段树区间覆盖)
The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...
- Jmeter-无法启动,'findstr'不是内部或外部命令,也不是可运行的程序
今天有一个同事的jmeter无法安装,于是帮他看了看,报以下错误: JAVA的环境变量没有配置好,于是重新配置了下环境变量后,再启动,发现还是不好,于是网上查了下, 发现要在电脑的环境变量中增加 pa ...
- APP设计规范
设计师DPI指南 本指南旨在为初级到中级设计人员提供“入门”或介绍性阅读,他们希望从一开始就学习或获得有关跨DPI和跨平台设计的更多知识. 尽可能少的数学和没有不可解析的图形,只需在简短的部分中订购直 ...