在做登录相关的页面时,常遇到这样的现象,浏览器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. 通过C#发送自定义的html格式邮件

    要发送HTML格式邮件,需要设置MailMessage对象的IsBodyHtml属性,设置为true. 类MailMessage在命名空间System.Net.Mail下.using System.N ...

  2. openstack 王者归来学习笔记

    rpc.call方法执行的流程:(下次看代码的时候可以根据这流程来看,注意:由于rpc服务器和客户端具有很松的耦合性,因此以上步骤并不是绝对的.) 1.rpc服务器定义和启动rpc服务 2.rpc服务 ...

  3. What is REST API

    What is REST REST is acronym for REpresentational State Transfer. It is architectural style for dist ...

  4. Workbench利用Python驱动DM执行Js进行建模

    Workbench的工作平台下可以利用Python进行一些操作,包括添加system和component等等.DM可以通过执行Jscript脚本进行自动建模,因此,结合这两块的内容,可以利用Pytho ...

  5. 什么是 superset

    Superset 是 Airbnb 开源的大数据可视化平台,其特性包括: backend 支持几乎所有主流的数据库 支持复杂的权限控制和管理(OpenId, OAuth 等),满足企业内部不同部门人员 ...

  6. css响应式

    <meta name="viewport" content="width=devicw-width,initial-scale=1.0"> 响应式图 ...

  7. 《Linux就该这么学》第十四天课程

    samba服务的配置文件解读 samba服务解决了Linux系统与Windows系统之间的文件共享问题,是一个非常不错的服务 原创地址:https://www.linuxprobe.com/chapt ...

  8. Libgdx slg游戏进程记录

    2月16日缩放居中,stage确定点击坐标,背景处理为actor 2月17日地图多次点击 2月19日stage确定点击位置(贝塞尔曲线六边形) 2月24日格式长度,读取xml属性解析btl保存 3月1 ...

  9. java -version显示版本和JAvA_HOME配置不一样

    当你需要安装多个版本的jdk时,可能会遇到更改了JAVA_HOME后java -version不变的情况. 一般情况下,将你的JAVA_HOME改为你要用的jdk的安装路径,然后你使用的就是这个版本的 ...

  10. cookie httpOnly 打勾

    在 chrome dev tools 中,通过 Application -> Cookies 可以查看 cookie. 其中有一列表头为`HTTP`,如果其下打勾了,则表明 httpOnly. ...