阻止浏览器自动填写表单

登录时会遇到浏览器自动将表单补充了，由于我们浏览器有一个记住密码功能，然后选择了记住之后，坑了~是个表单就把你的账号密码自动填进去。。。。不需要填的也填上了

看了好多方案，列举一下，遇到的可以都试试

方法一：autocomplete = "off"属性，我用的谷歌浏览器，在input中添加了，和form中也添加了，谷歌浏览器不好使

<label for="">登录名：
    <input type="text" placeholder="请输入用户名" v-model="loginForm.name" autocomplete="off">
</label>
<label for="">密码：
    <input type="password" placeholder="请输入密码" v-model="loginForm.password" autocomplete="off">                    
</label>

方法二：将密码的type = "password"改成type = "text"

确实不自动填充了，真的是简单粗暴~但是有时候密码还是希望是密文的~所以对密码方面要求不严格的可以试试~

根据上面的方法，我测试了一下，删除了其中一个input 之后，另外的input不填充

所以我猜测浏览器自动记住的是一个text的input，一个password的input，两个一起就自动填充了

方法三：亲测有效（用的是谷歌浏览器，vue项目）是根据上面的方法总结出来的，在添加一个input框，变成三个input，将添加的文本框隐藏，是不是就不自动填充了？？写了一下好使，别的浏览器的可以试试

将文本框display:none去掉，隐藏的input里面也不是黄色的，说明我们存好的信息没有自动填充进来~

<input type="text" style="display:none">
<label for="">登录名：
    <input type="text" placeholder="请输入用户名" v-model="loginForm.name" autocomplete="off">
</label>
<label for="">密码：
    <input type="password" placeholder="请输入密码" v-model="loginForm.password" autocomplete="off">                    
</label>

   上面白色的框框就是新增的input

方法四：亲测有效，最后选择使用的是下面的方法，和方法三很像，用两个input将填充的信息接住，在隐藏input

<input type="text" name="userName" style="display:none">
<input type="password" name="userPwd" style="display:none">
<label for="">登录名：
    <input type="text" placeholder="请输入用户名" v-model="loginForm.name" autocomplete="off">
</label>
<label for="">密码：
    <input type="password" placeholder="请输入密码" v-model="loginForm.password" autocomplete="off">                    
</label>

 隐藏前