1.Chrome禁用浏览器的密码框自动保存密码提示输入
最近在做项目的时候,要求项目的密码框不显示所记住密码的提示框(就是密码输入框点击不显示该网站所保存的密码列表),然后试了很多方法。autocomplete="off"无效,οnfοcus="this.type='password'"无效等等。
然后发现了chrome自动保存密码提示的规则:1.input的id,2.input的name。
如果这也还是不行,就在该input的上方添加一个带有name的隐藏框(如下),然后就是把上面的input隐藏的问题,一种是display:none,一种是position:relative,left:99999
<input name="a" class="item-input" type="password" placeholder="密码" />
<input class="item-input" type="password" placeholder="密码" />
2.如何禁用谷歌浏览器的自动填充
窗体加载的时候,将密码框readonly 设置为true,只读状态。自动填充机制无法启动
密码框得到焦点的时候,只读窗台去掉掉,代码为
οnfοcus=”this.removeAttribute(‘readonly’)”
关于 autocomplete=”off” ,禁用自动填充。这个属性好像是firefox 发起的,并不是标准属性,所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性
7:最新测试,iphone6s 遇到readonly 有可能会导致,软键盘不能弹出的问题,所以如果在手机端,还是不使用readonly 。建议如下面所示
<input type="text" οnfοcus="this.type='password'" autocomplete="off" id="setting_sign_psw" placeholder="请输入密码" >
elementUI:例子:
<el-form-item label="用户名" prop="jdbcUsername">
<el-input v-model.trim="formData.jdbcUsername" placeholder="请输入用户名" :readonly="readOnlyFlag" @focus="readOnlyFlag = false;"></el-input>
</el-form-item>
<!-- Chrome禁用浏览器的密码框自动保存密码提示输入 -->
<input name="a" type="password" placeholder="密码" style="position:absolute;left: 9999999px;"/>
<!-- :readonly="readOnlyFlag" @focus="readOnlyFlag = false;" 解决用户名和密码在谷歌浏览器默认用户名和密码回填问题 -->
<el-form-item label="密码" prop="jdbcPassword">
<el-input type="password" v-model.trim="formData.jdbcPassword" placeholder="请输入密码" :readonly="readOnlyFlag" @focus="readOnlyFlag = false;"></el-input>
</el-form-item>