表单密码自动填充hack

Little_XM 发布于2019-08-30 15:55 / 1250人阅读

摘要：甚至不分青红皂白，每个页面只要有类型的输入框，就会自动填充。请输入密码对于浏览器，如果页面上有两个以上的类型输入框，自动填充的时候只会填充第一个以及改输入框的上一个，分别填充账号和密码。

前言

写前端的，最讨厌的事有几个，其中一个就是用户/自己输入的密码被浏览器记住之后，每次打开页面都会自动填充。甚至不分青红皂白，每个页面只要有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

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

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

结语

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

希望能给你一点帮助！

混合云 idc机房托管自动填充 js填充表单数据自动填充php js form表单填充数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117412.html

表单密码自动填充hack

摘要：甚至不分青红皂白，每个页面只要有类型的输入框，就会自动填充。请输入密码对于浏览器，如果页面上有两个以上的类型输入框，自动填充的时候只会填充第一个以及改输入框的上一个，分别填充账号和密码。前言写前端的，最讨厌的事有几个，其中一个就是用户/自己输入的密码被浏览器记住之后，每次打开页面都会自动填充。甚至不分青红皂白，每个页面只要有password类型的输入框，就会自动填充。尤其是chro...

zollero 2019-08-02 14:19 评论0 收藏0
如何禁止浏览器自动填充

摘要：所以，这里给设置初始为，在用户点击聚焦后设置为，避免浏览器在页面之后判断登录表单进行回填。本文由 Deguang 发表于码路-技术博客浏览器的保存账户密码功能，给我们带来了很大的便利，但是在有些情况下，我们并不希望浏览器帮我们填充一些表单，然而autocomplete的一些参数项并不能阻止浏览器回填，这里我们来看下如何解决这个问题。问题描述：项目注册部分的表单有三项，分别为手...

jone5679 2019-08-02 11:43 评论0 收藏0
Laravel 5系列教程七：表单验证 Validation

摘要：几乎在每一个应用当中都会有表单，而有表单基本就离不开表单验证。在中，其实可以说是有两种方式来进行表单验证使用和使用。然后，上面的验证规则是对于和两个字段，我们需要用户为其填充内容，不能为空。原文来自：https://laravist.com/article/15 免费视频教程地址 https://laravist.com/series/laravel-5-basic Laravis...

jindong 2019-06-27 11:31 评论0 收藏0
禁止浏览器自动填充到表单

摘要：于是查看浏览器页面行为，发现该表单邮箱账号密码字段被浏览器默认填写，导致反复触发校验。正常触发自动填充解决方式既然浏览器遇到与的标签紧邻时触发自动填充行为，则将两个隔开，使用隐藏的方式欺骗浏览器，将密码信息填写在隐藏区域。经测试问题解决。在开发中偶然遇到的一个奇怪的问题，有一个需求会让用户输入邮箱和密码信息，该表单设置了校验规则（当触发blur时，才会触发校验），但之后的测试发现，只...

levinit 2019-08-05 12:55 评论0 收藏0
禁止浏览器自动填充到表单

摘要：于是查看浏览器页面行为，发现该表单邮箱账号密码字段被浏览器默认填写，导致反复触发校验。正常触发自动填充解决方式既然浏览器遇到与的标签紧邻时触发自动填充行为，则将两个隔开，使用隐藏的方式欺骗浏览器，将密码信息填写在隐藏区域。经测试问题解决。在开发中偶然遇到的一个奇怪的问题，有一个需求会让用户输入邮箱和密码信息，该表单设置了校验规则（当触发blur时，才会触发校验），但之后的测试发现，只...

chuyao 2019-08-01 18:29 评论0 收藏0