表单密码自动填充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输入框作成一个组件，使用起来不就很方便了吗？

但愿能给你一点帮助！