阻止google浏览器提示更新密码及阻止默认账户密码回显

一、input password 浏览器会提示更新密码

其根本原因是input type=password时浏览器会自动填充
优化场景：用户在重置密码，去请求接口之后未修改成功，浏览器也会提示更新错误密码。
解决方法是通过使用input type=text 修改css属性达到预期效果（不兼容ie）基于element-ui写法

<el-input type="text"  class="no-autofill-pwd" .........>
.no-autofill-pwd .el-input__inner{
  -webkit-text-security:disc!important;
}

上面的能完美解决除ie外的其他浏览器，但是在ie浏览器中它不会加密展示，而是直接把文本展示出来了，ie就需要区分处理（ie就用password）

isIE(){
  if (!!window.ActiveXObject || 'ActiveXObject' in window) {
    return true;
  } else {
    return false;
  }
}
created() {
  this.isIE = isIE();
}
//html标签中的写法
<el-form-item label="新密码" prop="clearPassword">
  <el-input
      type="text"
      class="no-autofill-pwd"
      v-if="!isIE"
      placeholder="请输入"
      v-model="passInfo.clearPassword"
      @keyup.enter.native="subPass"
  ></el-input>
  <el-input
      type="password"
      v-else
      placeholder="请输入"
      v-model="passInfo.clearPassword"
      @keyup.enter.native="subPass"
  ></el-input>
</el-form-item>

二、阻止默认回显

场景：google在报错过账户密码之后，去新增用户会自动回显当前用户的账号密码

浏览器回显原来是选择相邻的text和password来进行回显的，解决方法，我们加一组元素在中间隔断

//html标签中的写法
<el-form-item style="width: 35%" label="登录用户名">
  <el-input
      v-model.trim="info.loginName"
      @keyup.enter.native="update"
      maxlength="20"
      show-word-limit
      placeholder="请输入登录用户名"
  />
</el-form-item>
<!-- 解决自动填充保存过的账户密码占位  开始 -->
<el-form-item class="input-hide" style="width: 35%" label="登录用户名">
  <el-input
      maxlength="20"
      show-word-limit
      :disabled="isSee"
      @keyup.enter.native="update"
      placeholder="请输入登录用户名"
  />
</el-form-item>
<el-form-item class="input-hide" style="width: 35%" label="登录密码">
  <el-input :disabled="isSee" type="password" @keyup.enter.native="update" placeholder="请输入登录密码" />
</el-form-item>
<!-- 解决自动填充保存过的账户密码占位  结束 -->
<el-form-item prop="password" style="width: 35%" label="登录密码">
  <el-input
      v-model.trim="info.password"
      type="password"
      @keyup.enter.native="update"
      placeholder="请输入登录密码"
  />
</el-form-item>

css

.input-hide{
position: absolute;
z-index: -1;
opacity: 0;/*可以不用这个透明属性，以防基础层背景是透明显示出来了*/
}