前言
写前端的，最讨厌的事有几个，其中一个就是用户/自己输入的密码被浏览器记住之后，每次打开页面都会自动填充。甚至不分青红皂白，每个页面只要有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输入框做成一个组件，使用起来不就很方便了吗？
转载请注明：XAMPP中文组官网 » 表单密码自动填充hack