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

问题描述：

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

 

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

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

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

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 属性规定输入字段为只读

readonlyInput: true,

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

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