在做登录相关的页面时,常遇到这样的现象,浏览器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. Yii2.0 解决“the requested URL was not found on this server”问题

    在你下了 Yii 框架,配置完路由 urlManager 后,路由访问页面会报错“the requested URL was not found on this server”,url类似于这种“ht ...

  2. Mysql 数据库管理

    1. mysql用户和权限 mysql权限控制通过两步控制,第一是能不能连接(验证用户身份),第二是能执行什么操作(验证权限). 其中身份验证,需要验证连接mysql的计算机的IP地址或者计算机名称还 ...

  3. 认识JavaScript Promise

    参考: EC前端 - Promise - http://www.ecmaer.com/javascript/nativeObj/promise.html 关于Promise: 什么是 Promise? ...

  4. Percona XtraBackup使用说明(转)

    Percona XtraBackup使用说明 转载出自: https://blog.csdn.net/wfs1994/article/details/80396604 XtraBackup介绍 Per ...

  5. python 模块——os 模块

    os 模块--操作系统的各种接口 常用函数: os.path os.path.join(path,*paths) (常用,设置文件路径)将一个或者多个路径连接起来. PATH_TO_TEST_IMAG ...

  6. Naïve Media Player

    我的GitHub链接:https://github.com/Joyce45/hwt 一.播放器?怎么做? 提到播放器,首先想到的就是XAML控件库里的MediaElement,于是我又大致阅读了一下该 ...

  7. Vue history模式支持ie9

    vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...

  8. Java实现AES加密,异常java.security.InvalidKeyException: Illegal key size 的解决

    Java实现AES加密,抛出异常如下:java.security.InvalidKeyException: Illegal key size 代码参考 http://my.oschina.net/Ja ...

  9. ajax相关知识总结

    一.原生AJAX的兼容版本实现 function createXhr(){ var Xhr = null; //浏览器的判断 if(window.XMLHttpRequest){ //ie789 ch ...

  10. CentOS下安装Git

    在终端输入命令:yum install git,此时会进行提示安装,输入y, 在这种安装方式下,速度很快(windows系统下下载客户端速度超慢),当出现安装完毕时,就可以了. 安装完毕后输入git ...