去除浏览器自动填充账号密码功能简单并100%有效

原由

进入页面浏览器本身有一种机制会默认填充上一次的账号密码。他是根据input标签的type属性进行算法计算，满足条件会自带上次输入过的账号密码（目测：type="text"后紧接着type=“password”）的极容易出现填充。

实现思路

先在页面不使用type=“password”，欺骗浏览器我没有使用密码框。当我实际输入密码时，获取焦点（focus）把自身input的type属性再改成“password” ------ “告诉浏览器，我不是密码框”

保守点：把前面的账号也改一下，欺骗浏览器说：“我不是账号框”

实际代码

（我拿vue-element官方代码做案例）

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="账号">
    <el-input v-model="form.username" :type="inpUserType" placeholder="请填写账号" @focus="inpUserType='text'"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="form.password" :type="inpPwdType" placeholder="请输入密码" @focus="inpPwdType='password'"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即登陆</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
      inpUserType:"search",  // 长得样式跟text一样
      inpPwdType:"text",
        form: {
          username: '',
          password: '',
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>