在做登录相关的页面时,常遇到这样的现象,浏览器input的自动填充行为。

原因

设置 input 的 type 属性为 password 后,当页面进行过提交,并且允许浏览器记住密码后,那么再次加载该页面时,此时 password 及附近的 input 就会被自动填充。

安全问题

如果是个人电脑,用户体验是挺好,但若不是,会存在很大的安全问题,很容易被他人盗取用户名及密码。

解决

比较简单,在input:password中添加autocomplete属性值设置为new-password即可。

<input type="password" autocomplete="new-password" />

也看到过其他方式,但这个比较简单。

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

  1. chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

    参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...

  2. input输入框自动填充的问题

    火狐浏览器打开页面,input可以自动填充历史输入值,现在想无论input类型是type='text'还是'password'都禁止自动填充,因为我写的页面在input='text'时先检查是否有输入 ...

  3. 消除浏览器对input输入框的自动填充

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

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

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

  5. input框自动填充内容背景颜色为黄色解决方法

    谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...

  6. input输入框自动填充黄色背景解决方案

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  7. input密码自动填充

    自动填充样式修改 input: -webkit - autofill, input: -webkit - autofill: hover, input: -webkit - autofill: foc ...

  8. input标签自动填充问题

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

  9. 浏览器记住密码的自动填充Input问题完美解决方案

    1.input 前from和input占位隐藏 <form style="width:0;height:0;display:none;"> <input type ...

随机推荐

  1. Rsync未授权访问漏洞的修复

    转自:https://www.cnblogs.com/KevinGeorge/p/9648028.html 配置文件/etc/rsync.conf解析: motd file -> motd文件位 ...

  2. Pytorch之训练器设置

    Pytorch之训练器设置 引言 深度学习训练的时候有很多技巧, 但是实际用起来效果如何, 还是得亲自尝试. 这里记录了一些个人尝试不同技巧的代码. tensorboardX 说起tensorflow ...

  3. Mybaits API docs

    http://www.mybatis.org/mybatis-3/apidocs/index.html

  4. 一次HTTP请求响应涉及了哪些?

    HTTP请求和响应步骤 TCP/IP协议 TCP三次握手 HTTP协议 HTTP请求报文 HTTP响应报文 TCP四次挥手 HTTP请求和响应步骤 以上完整表示了HTTP请求和响应的7个步骤,下面从T ...

  5. C++数论板题(弹药科技):Lengendre定理和欧拉函数

    弹药科技 时间限制: 1 Sec 内存限制: 128 MB 题目描述 经过精灵族全力抵挡,精灵终于坚持到了联络系统的重建,于是精灵向人类求助, 大魔法师伊扎洛决定弓}用博士的最新科技来抗敌. 伊扎洛: ...

  6. ABP学习之旅

    1.我使用ABP的启动模板(http://www.aspnetboilerplate.com/Templates)来创建一个Web应用程序. 2.加载项目解决方案 在abp根据模板创建解决方案后,编译 ...

  7. Spring Boot不同版本整合Redis的配置

    1. Spring Boot为1.4及其他低版本 1.1 POM.XML配置 <!--引入 spring-boot-starter-redis(1.4版本前)--> <depende ...

  8. consul搭建

    1.准备3台服务器 linux1 192.168.0.101 linux2 192.168.0.102 linux3 192.168.0.103 2.准备向Linux上传文件的工具Winscp 3.去 ...

  9. vue路由独享守卫beforeEnter

    在某个路由中,使用beforeEnter()方法,参数是to,from,next 和全局路由守卫的用法是一样的 例子: import Vue from 'vue' import Router from ...

  10. Linux二进制分析PDF

    链接:https://pan.baidu.com/s/1lp5mz30J3RamFyQIXRvx5w 提取码:vcdq 我就是看不惯csdn的付费下载,链接失效了就评论区留言,我能收到邮件.