Chrome禁用浏览器的密码框自动保存密码提示输入（'autocomplete="off"'在Chrome中不起作用解决方案）,以及密码和用户名回填无问题

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>