如何阻止表单自动填充?

默认情况下,我们再次填写提交过的表单时,就会出现浏览器已经自动帮我们填写好或者输入框获取到焦点时展示下拉选项供我们自己选择,这样方便我们快捷的完成表单。但是也有问题,如果是在公共电脑上,又或者是这个表单时关系到你的钱包的,那么你是不希望所输入的东西被浏览器自动记录或填充的。

  • 禁用自动填充

要禁用自动填充,可以通过属性autocomplete实现,它有两个值onoff

autocomplete="off"

该属性可以用在form标签上,也可以用在input标签上。加上上面的代码后,浏览器的处理如下:

1. 告诉浏览器不再保存用户输入的数据来自动填充表单
2. 浏览器停止缓存数据到会话历史(session history)。即:我们点击浏览器回退箭头时,之前提交的表单数据不会展示出来。
  • 阻止密码管理自动填充

上面这样就可以了吗?当我们登录、注册时,浏览器会弹出提示是否记住密码,如果选择记住密码,下次进入这个页面依然会自动完成。为什么?因为现在的浏览器都实现了集成密码管理。如果有浏览器账号,还会在任意一台你登录账号的电脑上自动填充。这样,登录表单设置autocomplete="off"就无效了。

对于现代浏览器这一特性,要阻止登录表单自动填充,autocomplete属性有了一个新的值new-password。当对input输入框设置时,便不再会自动填充了。