Mozilla官方文档建议的是 直接使用 autocomplete = ‘off’ 即可禁止输入框从浏览器cache获取数据,博主以前使用这个也就足够兼容浏览器了。

现在发现,却在chrome、firfox上有兼容性 无法解决。

后来查阅相关资料得到以下解决方法:

1:可以设置一个默认的input用来接收浏览器的默认填充,并且设置css为dispaly:none

形如:

<input type = 'text' style='display:none'>

这样既不会影响用户的体验,也可以兼容所有的浏览器,但经过测试却发现,在chrome上不起作用,在firefox上也只能对type != password的 输入框起作用。

2:autocomplete = 'new-password'

<input type='text' >
<input type='password' autocomplete='new-password' >

使用上诉代码,在chrome上既可生效,用户名与密码都不会自动填充,但是firefox上任然会自动填充用户名

3:结合上诉两个情况

<input type='text' style='display:none'> <!-- 针对firefox -->
用户名:<input type='text' autocomplete='off'>
密码:<input type='password' autocomplete='new-password'>

既可解决针对chrome与firefox内核的浏览器自动填充输入框的问题

4:但是近期经过测试发现 这种方法还是不能解决firefox上密码框的历史输入,可以:3步骤上做这样的操作:

<input type='password' autocomplete="new-password" style="background-color: #FFFFFF!important;" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" />>

消除浏览器对input输入框的自动填充的更多相关文章

  1. 消除浏览器对input的自动填充

    在做登录相关的页面时,常遇到这样的现象,浏览器input的自动填充行为. 原因 设置 input 的 type 属性为 password 后,当页面进行过提交,并且允许浏览器记住密码后,那么再次加载该 ...

  2. 解决手机浏览器上input 输入框导致页面放大的问题(记录)

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  3. chrome下input文本框自动填充背景问题解决

    chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...

  4. 关于chrome浏览器的帐号密码自动填充以及出现的黄色背景色填充问题

    不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...

  5. 清除ie10+浏览器的input输入框后面会出现的x号和闭眼logo

    x号:::-ms-clear{display:none;} 闭眼logo: ::-ms-reveal{display:none;} tips:如果在外部引用的css里面没有作用,可以在写本页面的< ...

  6. 用户登录记住用户名导致表单自动填充bug解决方法

    最近做项目出现了一个极其讨厌的bug:在用户登录网站时,浏览器会自动提示是否记住密码,当选择记住密码时,正常浏览网页,会发现有那么几个input输入框会自动填充用户名,非常讨厌, 于是就觉得挺简单的一 ...

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

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

  8. 解决input框自动填充为黄色的问题

    题原因:input 框会自动填充一个颜色  如图所示  解决方法 :通过动画去延迟背景颜色的显示  代码如下 input:-webkit-autofill, textarea:-webkit-auto ...

  9. input标签自动填充问题

    <input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...

随机推荐

  1. [2012-12-18 14:59:31]AS3 常用正则表达式的总结-不用google了,我帮收集的很多了

    正则表达式是一种通用的标准,大部分计算机语言都支持正则表达式,包括as3,这里转摘出了一些常用的正则表达式语句,大家用到的时候就不用自己写了.红色字体为常用正则:下面这个类是我自己写的一个示例,想必大 ...

  2. 关于URL和http协议,http消息格式

    转自:http://crystal2012.iteye.com/blog/1447845 在WWW(全球资讯网)中想要连结到某个网页,便需要给浏览器一个位址,而URL在此的功能就是告知浏览器某个资源在 ...

  3. Linux学习笔记之Linux启动引导过程

    早期时,启动一台计算机意味着要给计算机喂一条包含引导程序的纸带,或者手工使用前端面板地址/数据/控制开关来加载引导程序.尽管目前的计算机已经装备了很多工具来简化引导过程,但是这一切并没有对整个过程进行 ...

  4. 20145313张雪纯 《Java程序设计》第7周学习总结

    20145313张雪纯 <Java程序设计>7周学习总结 教材学习内容总结 1967年定义的国际原子时,将秒的国际单位定义为铯原子辐射振动9192631170周耗费的时间. 为了简化日后对 ...

  5. linux中断的下半部机制

    一.中断处理为什么要下半部?Linux在中断处理中间中断处理分了上半部和下半部,目的就是提高系统的响应能力和并发能力.通俗一点来讲:当一个中断产生,调用该中断对应的处理程序(上半部)然后告诉系统,对应 ...

  6. linux c开发环境构成

    1.编辑器:VI.VIM 2.编译器:GNU C/C++编译器gcc 3.调试器:gdb 4.函数库:glibc 5.系统头文件:glibc_header

  7. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  8. mysql对数据库的备份和还原

    在对mysql数据库的某个数据库进行备份时,使用 mysqldump命令来进行操作 mysqldump -u root -p db_database_name > /[your_path.mys ...

  9. valid 校验方式

    校验参数方法:1.最简单的方式是,使用Java bean注解校验(如 @NotEmpty...)2.适合复杂点的自定义校验(推荐) 2.1 先定义一个校验接口: public interface Va ...

  10. struts2的refreshModelBeforeResult

    首先想介绍的是struts2的原型驱动ModelDriven机制. 所谓的ModelDriven,就是把一个实体类当成页面数据的收集对象.用法看起来像下面这个样子 <span style=&qu ...