禁止浏览器自动填充到表单

有一个登录页,有一个新建用户页。他们都有form表单,有username和password 两个input。

<form>
    <input type="text" name="username"/>
    <input type="password" name="password"/>
</form>

在登录页的时候浏览器记住了密码,如果去到新建用户页则 username 和 password 会被自动填充上去。

问题是,在新建用户页如何让浏览器不自动填充?(只考虑最新chrome)

其中查了资料http://www.jianshu.com/p/9da6...,用了display:none不生效。在chrome还是会自动填充。

----------分割线----------
已解决。
在前面加一个 <input type="password"/> 并设置css让不在页面中出现即可。

<form>
    <input type="password" style={{position: 'absolute', top: '-999px'}}/>
    <input type="text" name="username"/>
    <input type="password" name="password"/>
</form>

----------分割线----------

so,浏览器的自动填充原理是啥?

阅读 30.3k
评论
    11 个回答

    要求将不可见的input框放在页面的最前面,如body起始处, chrome之类的浏览器会填充最前面的输入框。

    <!-- 阻止浏览器的自动填充 -->
    <input type="text" name="_prevent_auto_complete_name" 
      autocomplete="off" readonly="readonly" style="display: none !important;"/>
    <input type="password" name="_prevent_auto_complete_pass" 
      autocomplete="new-password" readonly="readonly" style="display: none !important;" />

    chrome有两种填充, 一种是自动填充表单 autofill, 一种是自动完成密码 autocomplete; 请在需要的页面中进行设置。

    最新的问题,Chrome-72版本,将用户确定保存的用户名和密码强制填充到表单之中了,导致显示问题。
    以上代码实测生效。

      相似问题
      推荐文章