禁止浏览器记住密码和自动填充密码

禁止浏览器记住密码和自动填充密码

1、在不输入时设置为只读（只能做到禁用自动填充）

<FormItem label="密码" prop="password">
	<Input v-model="formData.password" type="password" placeholder="8-16位..."
           readonly
           autocomplete="new-password"
           onfocusin="this.getElementsByTagName('input')[0].removeAttribute('readonly')"
           onfocusout="this.getElementsByTagName('input')[0].setAttribute('readonly','readonly')"
           maxlength="16" class="form-item-input"/>
</FormItem>

在网上搜索了好多方法，例如autocomplate=“off”或者获取焦点时替换type为password，然后提交时清空等，都没有解决记住密码的问题，可能是谷歌的内核更新了，以前的方法失效了，最终找到了这种方法。并不是完全禁用了，在URL后面有个钥匙图标，点击输入框后还可以弹出窗口，只不过不会自动填充了。这种方法没有禁掉记住密码。如果该方法失效，请参考第二种方法。

注意：

如果只是想禁用自动填充可以使用autocomplate=“new-password”。
autocomplate=“off”已经失效但是autocomplate=“new-password”还可以用。

2、手动替换

<FormItem label="密码" prop="password">
	<Input v-model="formData.password" type="text" placeholder="请输入密码"
           autocomplete="new-password"
           @input="inputPassword"
           maxlength="16" class="form-item-input"/>
</FormItem>

标签type为text，监听输入框的输入事件，然后通过js方法替换输入框的值为圆点，真实值用另一个变量存储。

//showPassword为显示给用户的圆点，this.formData.password为用户输入的真实值
inputPassword($event){
    //获取输入框的值
    let value = event.target.value;
    if (value!=''){
        //如果不为空，逐个字符判断是否为圆点
        for (let i =0; i<value.length; i++){
            if (value.charAt(i)!="\u25CF"){
                //如果不是圆点，表示该字符为用户输入的值，放到真实值的对应位置
                let char = value.charAt(i);
                this.formData.password=this.formData.password.slice(0,i)+char+this.formData.password.slice(i);
                //将该字符替换为圆点
                value = value.slice(0,i)+"\u25CF"+value.slice(i+1);
            }
        }
        //防止真实值和圆点的数量不对应。
        this.formData.password = this.formData.password.slice(0,value.length);
        //将转换过的字符串显示给用户
        this.showPassword = value;
    }else{
        //保持一致性
        this.formData.password = '';
    }
}

该方法适合密码没有格式的验证规则，只有必输验证。如果需要验证格式，请手动在js方法中进行校验。这种方法有一个缺陷，当用户将光标移动到中间并删除圆点时，不能监听到用户删除字符的位置，所以真实值就无法再保持一致性，如果想解决该问题，可以监听按键事件，监听方向键，然后用一个变量记录光标位置来解决该问题，但是鼠标也可以改变光标位置，所以没有完美的解决方案，但是该缺陷影响不大，一般来说对于密文用户很少去移动光标来修改已经输入的值，如果真的有用户这样做了导致密码不正确，最多验证密码失败后让他重新输入就行，如果他第二次又移动光标了，那他娘的真是个天才，如果不介意这个小缺陷，建议使用该方法，基本上没有不兼容的浏览器。

3、设置安全文本，该方法仅适用于谷歌内核的浏览器。

<input type="text" class="square-password textBox" name="paymentpassword" />
    
<style>
        input{
            -webkit-text-security:square; 
            text-security:square;
        }       
    </style>
 
    <script>
        window.onload = function(){
            init(); 
        }
        function init(){
            //获取输入框对象
            var x = document.getElementsByTagName("input")[0];
            //获取输入框的style对象
            var style = window.getComputedStyle(x);
            console.log(style);
            //判断文本安全样式是否生效
            if(style.webkitTextSecurity){
                //do nothing
            }else{
                //如果不生效就设置输入框的类型为password
                x.setAttribute("type","password");
            }
        }           
    </script>

-webkit-text-security:square; 设置文本为安全文本样式，可以为圆点，星号等样式，具体样式可以自定百度。该方法对于谷歌系浏览器来说是最完美的解决方法，但是对于其他类型的浏览器就不友好了。