表单密码自动填充hack

zollero 发布于2019-08-02 14:19 / 3541人阅读

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

前言

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

希望能给你一点帮助！

云服务器 GPU云服务器自动填充 js填充表单数据自动填充php js form表单填充数据

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

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

表单密码自动填充hack

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

Little_XM 2019-08-30 15:55 评论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
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

MangoGoing 2019-08-29 15:30 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

zorro 2019-08-22 17:30 评论0 收藏0