在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. 去掉nameid属性,使用class来作为选择器的替代,不会进行自动填充。(亲测 chrome 69 有效

综上,如果不想要填充功能,去除name和id属性是最简单有效的方法。

google chrome浏览器自动填充解决方案的更多相关文章

  1. input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。

    user-block-name, .user-block-pwd { margin-bottom: 10%; text-align: center; position: relative; } .us ...

  2. chrome浏览器自动填充失效问题

    现在浏览器带有自动填充,一般在input标签中增加autocomplete="off" 可以进行控制,off代表不填充,on代表填充,这个属性也可以放在form标签中,对所有的in ...

  3. 解决chrome浏览器自动填充密码

    chrome会自动填充密码,解决方法很简单 使用下面的参考代码即可: <input type="password" readonly οnfοcus="this.r ...

  4. Chrome浏览器自动填充<input>标签的密码

    问题:登录页面登录时,Chrome浏览器保存了用户名和密码,在其他页面管理其他的账户和密码时,密码框先是显示正确的密码,然后一闪而过被覆盖. 原因:问了技术主管才得知,Chrome浏览器中的,保存用户 ...

  5. 禁止chrome浏览器自动填充表单的解决方案

    经过测试,对chrome42,重写input: auto-fill样式不起作用,加上autocomplete="off"也不起作用. 因此使用了两个隐藏的输入框: <inpu ...

  6. 详解Google Chrome浏览器(操作篇)(下)

    开篇概述 由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容.对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即 ...

  7. 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  8. 详解Google Chrome浏览器(操作篇)(上)

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  9. Ubuntu 14.04 LTS下安装Google Chrome浏览器

    在Ubuntu 14.04下安装Google Chrome浏览器非常简单,只要到Chrome的网站下载Deb安装包并进行安装即可.当然你也可以使用APT软件包管理器来安装Google Chrome浏览 ...

随机推荐

  1. 2018网络预选赛 徐州G 线段树

    线段树,假设求(x1,y1)点的贡献,就找所有比该点出现时间晚,且x坐标大于x1的点中y最大的,贡献就是Y-y1,由于题目条件限制,不可能有x坐标大于(x1,y1)且y坐标大于y1的点,所以贡献肯定为 ...

  2. Amazon S3 云服务

    一.简介 Amazon Simple Storage Service (S3) 是一个公开的服务,Web 应用程序开发人员可以使用它存储数字资产,包括图片.视频.音乐和文档. S3 提供一个 REST ...

  3. NSSelectorFromString 使用示例

    NSSelectorFromString 动态加载实例方法. SEL sel = NSSelectorFromString(@"yourMethod:")//有参数 if([obj ...

  4. leetCode编程题

    已知链表1->2->3->4,先需要删除3这个节点,请完成函数.注意,这里只给定要删除的节点3,并不知道3之前的节点是哪个,以及整个链表是什么节点. void delete(List ...

  5. Java多线程并发学习-进阶大纲

    1.synchronized 的实现原理以及锁优化? 2.volatile 的实现原理? 3.Java 的信号灯? 4.synchronized 在静态方法和普通方法的区别? 5.怎么实现所有线程在等 ...

  6. [译]Javascript中闭包的各种例子

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  7. Linux下管理员强行踢出用户的命令使用方法

    Linux强制踢出用户命令: 一.输入w命令查看已登录用户信息 [root@KW_S01_192.168.1.106_A ~]# w 19:22:31 up  2:11,  3 users,  loa ...

  8. hadoop下HDFS基本命令使用

    前提:启动hadoop 1. 查看hdfs下 " / " 的目录 hdfs dfs -ls / 2. 创建文件夹(在 " / " 创建hadoop文件夹) hd ...

  9. Spring core注解

    1.@Autowired Autowired是用在JavaBean中的注解,通过byType形式,用来给指定的字段或方法注入所需的外部资源 Autowired注解来指定自动装配,可以修饰setter方 ...

  10. Beautiful Sequence

    Beautiful Sequence 给定一些数(可能相同),将它们随机打乱后构成凹函数,求概率 .N<=60 . 首先,这种题求概率事实上就是求方案.所以现在要求的是用这些数构成凹函数的方案数 ...