禁止浏览器自动填充密码,用户名的问题

最近在项目中遇到一个问题,系统管理员在页面添加普通用户时候,浏览器会在用户名和密码框自动填充当前登录用户名和密码,在网上搜索很多,找到几种办法,亲测第三,四种方法有效,建议使用第四种

方法一:设置autocomplete=‘off’,适用于普通文本框

//用户名
<input type="text" autoComplete="off" name='name'/>

方法二:设置autocomplete=‘new-password’，适用于密码输入框

//密码
<input type="password" autoComplete="new_password" name='password'/>

方法三:设置autocomplete=‘off’,在input上面各加上一个隐藏的input,type设置成text,点击后改成password,但是容易造成表单提交时候数据混乱的问题,需要看一下js是否处理了提交数据,根据ID或者class取值,而不是根据name取值.

//密码
<input type="text" name="name" style="display: none"/>
<input type="text" name="username" AUTOCOMPLETE="off" />

<input type="password" style="display: none"/>
<input type="text" name="password" AUTOCOMPLETE="off" onfocus="this.type='password'" />

方法四:将input的属性设置成只读,onfocus函数,当点击input时候将只读属性去掉

//用户名
<input type="text" readonly onfocus="this.removeAttribute('readonly');" name="username" />
//密码
<input type="password" readonly onfocus="this.removeAttribute('readonly')" name='password'/>