表单密码自动填充hack

前言

写前端的,最讨厌的事有几个,其中一个就是用户/自己输入的密码被浏览器记住之后,每次打开页面都会自动填充。甚至不分青红皂白,每个页面只要有password类型的输入框,就会自动填充。尤其是chrome。

不仅烦人,有时候还会影响样式,比如chrome下,输入框带有背景icon,但是自动填充会变成黄色背景,你的背景icon没了……

怎么办?

解决办法

网上有很多hack的办法,有的用js控制输入框类型,有的定时器清除输入框的值,但是都不太好用。

经过研究/测试,发现了一种很简单的hack方法,纯css+html,不影响页面布局,不需要js,稳定,效果很棒。

CSS

.hide-input{
    width: 0;
    height: 0;
    position: absolute;
    top: -100000px;
    opacity: 0;
}

HTML

<input type="text" class="hide-input"> 
<input type="password" class="hide-input"> 
<input type="password" placeholder="请输入密码" />

对于chrome浏览器,如果页面上有两个以上的password类型输入框,自动填充的时候只会填充第一个以及改输入框的上一个,分别填充账号和密码。

但是前提是该password输入框必须是可见的,不能是display: none;或者visibility: hidden;,所以,对于需要隐藏的输入框,我们设置宽度为0,高度为0,透明度为0,绝对定位,在页面上方很高的位置,这样的设置,既保证了该元素的可见性,又确保不会因为意外而影响到页面的其他元素。

结语

这样的写法,有些累赘。但是如果做成组件,就很方便了。
现在前端框架都是组件化的,我们完全可以把password输入框做成一个组件,使用起来不就很方便了吗?

希望能给你一点帮助!

    原文作者:陈其文
    原文地址: https://segmentfault.com/a/1190000018257675
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞