在做登录相关的页面时,常遇到这样的现象,浏览器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. ----XMLHttpRequestAPI简单介绍----

    XMLHttpRequest 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新.这使得Web页面可以只更新页面的局部,而不影响用户的操作 ...

  2. powershell脚本找修改的文件

    $sourcedir="D:\workspace" $targetdir="E:\newf" $lastdate="2017-05-19" ...

  3. #error "OpenCV 4.x+ requires enabled C++11 support"解决方法

    报错的本质是需要c++11的支持,顾名思义,当前的编译环境是c++11以下的版本.我用的cmake编译,因此再cmakelists文件内添加设置c++标准为14就可以编译通过. )

  4. 【ElasticSearch】 elasticsearch-head插件安装

    本章介绍elasticsearch-head插件安装,elasticsearch安装参考:[ElasticSearch] 安装 elasticsearch-head安装和学习可参照官方文档: http ...

  5. 微信小程序开发之搞懂flex布局1——Flexbox

    Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...

  6. clion中配置glfw和glew

    clion中只能用cmake文件配置 最开始不清楚cmake语法走了不少弯路 如果遇到symbol(s) not found for architecture x86_64错误,百分百是cmake没配 ...

  7. T-3-java核心API-基础类

    一.API 现成的类(程序) Java API是java(Oracle)提供的系统标准API. 第三方的jar包API,如:JUnit.jar. 可以自己开发一些API. 一般情况下任何技术都有现成的 ...

  8. 计蒜客 2019 蓝桥杯省赛 B 组模拟赛(一)

    D题:马的管辖 二进制枚举方案.判断该方案是否全部能被覆盖,将最优方案存下来并进行剪枝. #include<iostream> #include<cstring> #inclu ...

  9. Java程序设计(第二版)复习 第二章

    1.Java使用Unicode字符集,一般用16位二进制表示一个字符.且Java中午sizeof关键字,因为所有基本数据类型长度是确定的,不依赖执行环境. 2. Java变量在声明时并没有分配内存,真 ...

  10. JDBC数据库

    JDBC是Java程序连接和存取数据库的应用程序接口(API),包括两个包:java.sql和javax.sql. 用JDBC访问数据库的一般步骤: 1.建立数据源 2.装入JDBC驱动程序:使用Cl ...