input输入框阻止浏览器默认填充的解决方案总结

问题描述：

    通常在前端开发的过程中，使用表单中加入输入框来实现登录注册是十分常见的，一些浏览器就会默认填充我们曾经使用过的账号密码，这个处理方式对于登录的时候是非常方便，但是对于注册页面，显然自动填充就非常鸡肋。

     博主在解决这个自动填充问题的时候用了以下几种方法，都没有很完全的得到解决（不同浏览器兼容性问题），本人使用的是谷歌浏览器

1. 在form表单中或者input标签里面添加auto-complete="off"（没有解决）

<el-form autocomplete="off">
    <el-form-item>
        <el-input
            prefix-icon="el-icon-user-solid"
            v-model.trim="registerForm.account"
            clearable
            autocomplete="off"
            >
        </el-input>
    </el-form-item>
</el-form>

2. 在input 里面加上 autocomplete=“new-password” 属性（没有解决）

<el-form>
    <el-form-item>
        <el-input
            prefix-icon="el-icon-user-solid"
            v-model.trim="registerForm.account"
            clearable
            autocomplete="new-passowrd"
            >
        </el-input>
    </el-form-item>
</el-form>

3. 直接上代码（没有解决）

$(function(){
    $('#setaccount input').attr("readonly","readonly");//让from表单下所有的input输入框都是只读状态(#setaccount是方法2里面from表单的id)
    $('#setaccount input').click(function(){//当某个被input框点击的时候,就删掉被点击的这个input框的只读属性readonly
        $(this).removeAttr("readonly");
    });
});

！ 然后博主发现了一种终极解决方法，分享给遇到同样问题的各位

✅使用readonly属性和foucs方法联合搭配，当浏览器打开页面的时候，将输入框设为只读，当鼠标聚焦到输入框的时候再给它放开。

tips：readonly 属性规定输入字段为只读

<el-form>
    <el-form-item>
        <el-input
            prefix-icon="el-icon-user-solid"
            v-model.trim="registerForm.account"
            clearable
            :readonly="readonlyInput"
            @focus="cancelReadOnly()"
            >
        </el-input>
    </el-form-item>
</el-form>

readonlyInput: true,

cancelReadOnly () {
    this.readonlyInput = false;
},

希望这种方法能够帮助到各位！💖