input标签在谷歌浏览器记住密码下的一个自动填充BUG

Chrome自带记住密码功能，带来了极大方便

但是在点击保存之后，input标签会自动填充所保存的密码，如下图：

而且填充得很乱，密码不一定就会填充在密码框里。解决这一个BUG，可以用下面这个方案：

例如我们有个input标签：

1 <input type="text" class="test" id="test">

首先在这个input标签上面加一个display为none的input标签

1 <input type="text"style="display: none">
2 <input type="text" class="test" id="test">

然后为input加一个autocomplete="off"的属性，此属性是 HTML5 的新属性，自动完成允许浏览器预测对字段的输入，但是只只用于text, search, url, telephone, email, password, datepickers, range 以及 color类型的<input>和<form>，所以如果我们需要一个密码框，需要给input设置一个οnfοcus="this.type='password'"

1 <input type="text" class="test" id="test" style="display: none";>
2 <input type="text" class="test" id="test" placeholder="请输入密码" autocomplete="off" οnfοcus="this.type='password'">

转载于:https://www.cnblogs.com/dandeliongogo/p/6667607.html

input标签在谷歌浏览器记住密码下的一个自动填充BUG相关推荐

html 弃用浏览器记住密码,html页面禁止自动填充浏览器记住的密码
现在的浏览器功能越来越强大,比如Chrome浏览器,在一个系统login的时候我们一般会记住密码,那么在整个系统中,浏览器一旦遇到 type="password"的控件,就会把密码 ...
谷歌浏览器记住密码——导致Input组件出现特殊样式的修改
昨天写了一个登陆页面,一般登录页需要输入用户名.密码等内容,就是一个简单的表单提交. 最终效果图如上所示: 红框中的部分有个浅蓝色的底,一开始我以为是其他同事写的css的影响,后面才发现是谷歌浏览器记 ...
关于password导致input弹出浏览器记住密码弹框问题
关于password导致input弹出浏览器记住密码弹框问题问题描述问题解决代码实现问题描述当有input有password的输入框在的时候,其他input输入框可能会在获取光标的时候会弹出 ...
html input标签清除历史输入记录下拉框
一.在html 中.如果input标签是放在form表单中的话是会有历史记录的. 比如: <!DOCTYPE html> <html> <head> </he ...
html如何避免360自动填充账号密码,解决浏览器会自动填充密码的问题
解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...
Excel添加下拉按键自动填充颜色
1.设置下拉按键选择单元格--->选择菜单栏中的"数据"选项--->选择"数据验证"--->选择"数据验证"-----& ...
html 下拉菜单自动填充,下拉框自动实现自动填充
在我们平台中有这样的一个功能,设置了数据字典就可以使下拉框自动选择数据的类型,但是有一点不足的地方就是没有默认值,现在我要做的就是如何实现这个有默认值的下拉框. 还是有日期来举例.如图所示功能: (1 ...
谷歌浏览器记住密码功能 input框黄色背景
input {background-color: rgba(255, 255, 255, 0) !important;}input:-webkit-autofill {transition: back ...
网站下拉菜单，选择下拉后自动填充(图)
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

input标签在谷歌浏览器记住密码下的一个自动填充BUG

input标签在谷歌浏览器记住密码下的一个自动填充BUG相关推荐

最新文章

热门文章