密码.png

控制密码显示与隐藏的功能已经完美实现。
然而问题又来了：浏览器有个记住密码的功能，下次登录时会自动填充上次登录记住的账号，用起来好像挺方便的。然而我要做的是后台添加管理员账号的功能，肯定是不希望自动填充账号密码的、也不希望提示已保存账号密码、也不用浏览器记住新增账号密码。
打开新增弹窗，发现账号密码输入框已经自动填充了登录时的账号密码：

remember.png

给输入框添加属性autocomplete="off"，并不起作用。自动填充是因为浏览器打开页面时捕捉到了页面的密码输入框，那就给输入框动态设置type属性试试？
html:

<el-input v-model="adminPwd1" :type="passwordType1" style="width:300px" placeholder="请输入账户密码">
  <i slot="suffix" class="pwdIcon" @click="changePwdShow('pwd')">
    <svg-icon :icon-class="passwordShow.pwd?'eye-open':'eye-close'" />
  </i>
</el-input>

watch:

watch:{
  adminPwd1(val){
    if(val){
      this.passwordType1= 'password'
    }else{
      this.passwordType1= 'text'
    }
  }
}

data：

data() {
  return {
    passwordType1: "text"
  }
},

现在是输入框初始type为text，当输入框输入内容时type变为password。
结果发现输入框初始状态为空，但输入内容时（type变为password），又自动填充了。
既然对账号密码输入框没办法解决，那就另外做两个输入框来迷惑浏览器。

<el-input type="text" autoComplete="on"></el-input>
<el-input type="password" autoComplete="on"></el-input>

<el-input v-model="adminPwd1" :type="passwordType1" style="width:300px" placeholder="请输入账户密码">
  <i slot="suffix" class="pwdIcon" @click="changePwdShow('pwd')">
    <svg-icon :icon-class="passwordShow.pwd?'eye-open':'eye-close'" />
  </i>
</el-input>

可以发现账号密码被填充到了新加的输入框，要用的账号密码输入框也没有自动填充

remember2.png

pwdCue.png

该autocomplete属性提供了一种声明机制，通过该机制，网站可以与用户代理一起工作，通过将特定字段标记为“用户名”或“密码”来提高后者检测和填写登录表单的能力，并且用户代理实现各种检测启发式与没有花时间在标记中提供此详细信息的网站合作。

分析可知，浏览器是根据input的一些属性来捕捉账号密码输入框的，上面的问题应该是把两个输入框都识别为密码输入框了，毕竟它俩没有太大区别，最终，给假输入框增加了name属性作为唯一标识，问题解决。
所以最终解决办法是添加两个让浏览器自动填充账号密码的、带有name属性的、隐藏的输入框。

<!-- 禁止浏览器自动填充密码的隐藏输入框 -->
<el-input type="text" name="hideInput1" style="opacity:0;position:fixed;left:10000px;"></el-input>
<el-input type="password" name="hideInput2" style="opacity:0;position:fixed;left:10000px;"></el-input>
<!-- 防止浏览器自动填充密码的隐藏输入框 -->