禁止表单自动填充

场景

我们的登录表单一般都是 input text + input password:

<form id="loginForm">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">登录</button>
</form>

登录后如果用户选择了保存登录密码, input(text+password)接在一起,那浏览器就会自动填充登录时的输入,而且chrome浏览器还会有黄色的背景色。

解决方法:

1、使用 autocomplete 属性

<input autocomplete="off">

这个方案对于某些版本的浏览器可能不行。

2、使用假的 input 让浏览器去填充

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

个方案原理是让浏览器去填充用户实际上看不到的 input。虽然看上去代码比较 low,但是很实用。but!有时候比较坑也是无效。

3、password的标签上加  autocomplete="new-password" 

 

posted @ 2017-11-22 10:42  Jaye8584  阅读(1506)  评论(0编辑  收藏  举报