在做登录相关的页面时,常遇到这样的现象,浏览器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. [DP][NOIP2015]子串

    子串 题目描述 有两个仅包含小写英文字母的字符串 A 和 B. 现在要从字符串 A 中取出 k 个 互不重叠 的非空子串, 然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的 ...

  2. day 1:计算机发展史和组成部分

    本节内容: 1,计算机的发展史 2,计算机的组成 1,计算机的发展史 1946年2月14日,由美国军方定制的世界上第一台电子计算机“电子数字积分计算机”(ENIAC Electronic Numeri ...

  3. 洛谷P3916||图的遍历||反向建图||链式前向星||dfs

    题目描述 给出 NN 个点, MM 条边的有向图,对于每个点 vv ,求 A(v)A(v) 表示从点 vv 出发,能到达的编号最大的点. 解题思路 看起来很简单的一道题, 但我依然调了一天,我还是太菜 ...

  4. pymysql-python爬虫数据存储准备

    mongodb 和mysql 在使用哪个数据库 来存储数据上 小哥还是纠结了一下下. 很多爬虫教程都推荐mongodb 优势是速度快 因为我已经本机安装了一下 php开发环境,mysql是现成的, s ...

  5. 解决 ERROR: missing Change-Id in commit message footer 问题

    提交代码操作 git push origin HEAD:refs/for/XXX,提示失败ERROR: missing Change-Id in commit message footer,丢失Cha ...

  6. mui getJSON实现jsonp跨域

    //刚开始做APP的时候,后台给的方式是jsonp,然后就百度mui框架的jsonp跨域,看了好多文章,都说可以支持,但是大部分都是直接把别人复制来的,都不知道是不是真的能支持,做好打包完的时候,下载 ...

  7. MySQL远程连接失败(错误码:2003)

    一 环境信息 服务器系统:Ubuntu 18.04 服务器MySQL版本:14.14 Distrib 5.7.25 本地系统:Kali Linux 本地客户端:python3交互模式 本地开发环境:p ...

  8. Day11 (黑客成长日记) 爬取网站图片

    #导入第三方库# coding:utf-8import requests,re #找到需要爬取的网站'http://www.qqjia.com/sucai/sucai1210.htm' #1>获 ...

  9. wx 参数传值

    1: data-id 我们可以给HTML元素添加自定义的data-*属性 example:   假设页面里有下面的元素存在: <div id="myDiv" data-nam ...

  10. 个人对于angularjs依赖注入的理解

    依赖注入(Dependency Injection,DI),作者认为本文中所有名词性的"依赖" 都可以理解为 "需要使用的资源". 对象或者函数只有以下3种获取 ...