Web 防止浏览器记住登录密码（vue）

需求： 在上一篇（登录页隐藏密码位数）的基础上防止浏览器记住密码

在网上查了很多也试了很多,比如:

       1. 添加-webkit-text-security:disc;

        2. input 添加属性autocomplete = "off"; 

        3. 动态修改input的type属性

通过测试,发现有很多兼容上的问题。最后我选择了另外一种解决方式。

解决思路：

   使用type='text'属性，将输入的值都用 · 来代替，这样就不会被浏览器记录。

   问题： 用 · 来代替时，它的大小和type = 'password' 时的大小不同

   解决：当浏览器是 webkit内核时，使用 -webkit-text-security:disc; 否则当有值时将值的大小修改为22px(根据实际情况修改大小)。

具体代码：

CSS:

.ivu-input{
     -webkit-text-security:disc;
      text-security:disc;
}
.pwdFontSize .ivu-input{
   font-size: 24px !important;
}

HTML: 

JS:

     data(){
           return{
                form:{
                     password: '' // 绑定的值
                },
                passwordCover: [],  // 替换密码长度
                passwordReal: '', // 实际密码
                oldPassword: '',  // 旧密码
                isWebkit: false,  // 是否是webket内核浏览器
                changeSize: false // 是否需要修改字体大小
          }
      },
      created () {
            // 判断浏览器是否支持 webkitTextSecurity
            this.isWebkit = ('webkitTextSecurity' in document.documentElement.style);
      }
      methods: {
            passwordChange () {
                // 判断是新增还是删除
                if (this.oldPassword.length < this.form.password.length) {
                    if (this.form.password.length < 2) { // 防止用户全部选中替换密码
                        this.passwordCover = [];
                        this.passwordReal = '';
                    }
                    this.passwordReal += this.form.password.slice(-1); // 将新输入的值加入实际密码中
                   // 随机生成1~5位· 
                    let result = '';
                    let length = Math.ceil(Math.random() * 5);
                    this.passwordCover.push(length);
                    while (length + 1 > 0) {
                        result += '·';
                        length -= 1;
                    }
                    this.form.password = this.form.password.slice(0, -1); // 删除刚输入的值
                    this.form.password += result; //添加替换的字符串
                    this.oldPassword = this.form.password; // 更换新的旧密码值
                } else { // 删除
                    this.deleteData();
                }
                if (!this.isWebkit) { // 如果不是webkit并且存在输入值的话，修改字体大小
                    this.changeSize = this.form.password.length > 0;
                }
            },
            deleteData () { // 删除数据
                this.passwordReal = this.passwordReal.slice(0, -1);
                let len = this.passwordCover.pop();
                this.form.password = this.form.password.slice(0, -len);

                this.oldPassword = this.form.password;
            }
      }

保存时密码使用this.passwordReal

最后有发现在IE浏览器中，通过中文输入法输入密码时会出现混乱的情况，通过添加样式ime-mode: disabled;禁用输入法。

OK，到这里就结束了，欢迎大家指导！！！