表单密码自动填充hack

2024年2月16日 91次阅读 来源: 陈其文

前言

写前端的，最讨厌的事有几个，其中一个就是用户/自己输入的密码被浏览器记住之后，每次打开页面都会自动填充。甚至不分青红皂白，每个页面只要有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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞