在做登录相关的页面时,常遇到这样的现象,浏览器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. ABB机器人设置安全区(案例版)

    ABB机器人设置安全区.中断(案例版) 1.概述 在如今机器人中普遍会设置机器人的安全区域,也可以理解为工作范围.主要目的是为了机器人运行时的安全性和可靠性.ABB机器人也不例外,下面我们就讲讲ABB ...

  2. js二分算法排序

    var arr = [1,2,3,5,10,15,23,35,67,76,78,89,100];var len = arr.length;for (var i = 1; i < len; i++ ...

  3. JavaScript数据类型,构造函数

    JavaScript 的数据类型分为两类:原始类型和对象类型. JavaScript中的原始类型包括数字.字符串和布尔值 JavaScript中有两种特殊的原始值:null和undefined. Ja ...

  4. 使用Druid作为SpringBoot项目数据源(添加监控)

    Druid是一个关系型数据库连接池,它是阿里巴巴的一个开源项目.Druid支持所有JDBC兼容数据库,包括了Oracle.MySQL.PostgreSQL.SQL Server.H2等.Druid在监 ...

  5. 对于新版本的webstorm对vue的支持

    webstorm 对于官方vue的支持,直到2017.1,这个版本,之后的版本不能直接安装vue插件,这时候就需要自己手动新建vue模板了

  6. 关于U3D的.SDK对接

    1,SDK对接原理:https://www.cnblogs.com/msxh/p/7220741.html 2,Unity ADS对接:https://blog.csdn.net/chenluwolf ...

  7. appium解决每次运行都需要安装Unlock以及AppiumSetting的问题

    这是我用appium遇到的第三个坑?之前因为环境的问题,chromedriver驱动总是安装不对,后来发现是因为路径的原因.解决之后,现在出现新的问题,那就是“appium每次运行都要去重新安装Unl ...

  8. Unity编辑器扩展-Custom List, displaying data your way

    本文转自http://catlikecoding.com/unity/tutorials/editor/custom-list/ Custom List, displaying data your w ...

  9. usb 枚举流程

    Linux-USB总线驱动分析 如下图所示,以windows为例,我们插上一个没有USB设备驱动的USB,就会提示你安装驱动程序 为什么一插上就有会提示信息? 是因为windows自带了USB总线驱动 ...

  10. PLSQL设置细节

    1. tnsnames.ora 文件设置中,前面不能包含空格,否则:无法解析连接字符串 2. 当一切配置都正确,但是还是无法连接:“身份证明检索失败” 解决:打开tns_admin配置连接串的目录,修 ...