如何禁止浏览器自动填充

本文由德广发布于码道-科技博客浏览器保存账号密码的功能给我们带来了极大的便利，但在某些情况下，我们并不希望浏览器帮我们填充一些表单，但是自动完成的一些参数不能阻止浏览器回填。下面我们看看如何解决这个问题。问题描述：项目注册部分的表单中有三项，分别是手机号、验证码和密码。注册操作完成后，浏览器会提示您是否保存密码。验证码显示在用户名部分。点击保存后，会打开登录页面，手机号和密码项分别填写为验证码和密码，给用户带来一些不便。解决过程：1、第一反应是在登录表单的标签中添加autocomplete="off"MDN自动完成文档"off"。不允许浏览器自动输入或选择该字段的值。文档或应用程序可能提供了自己的自动完成功能，或者出于安全考虑要求不自动输入字段的值。注意：在大多数现代浏览器中，将自动完成设置为“关闭”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或在站点的登录表单中自动填写这些值。请参阅自动完成属性和登录字段。在autocomplete文档中，写明当该值为off时，浏览器禁止给当前字段自动输入或选择一个值，但是下面的Note中写到：在大多数现代浏览器中，off值无法阻止浏览器的密码管理工具自动填充，所以第一次尝试失败；2.动态设置密码输入标签type这个设置可以保证用户可以防止浏览器将其识别为登录表单并在点击密码框前自动填写。这里多说几句，浏览器如何判断当前表单需要自动完成，浏览器自动保存表单是因为当前表单有一个password类型的input，这个input是表单中的第二个input输入框。所以这里设置密码的初始类型为text，在用户点击input聚焦后设置为password，避免页面加载后浏览器判断登录表单回填。这样可以解决大部分场景下避免回填的需求。但是我们的业务需要根据跳转链接中的param为用户填写密码，这就导致密码在用户主动关注前会以明文显示，关注后会隐藏，并且操作体验不好；3.page.onload后的js控件输入类型方法同上，问题是页面加载后，手动设置输入类型为password，然后根据页面url参数填写表单。但是存在无法控制浏览器填写时机的问题，导致业务填写表单被自动填写覆盖；计划通行证；4.autocomplete设置其他参数autocomplete除了on和off之外还有很多参数：name,email,username,new-password,current-password,street-address等；当inputtype为password但autocomplete为new-password时，可以解决浏览器自动填充问题，浏览器会将当前输入框识别为新密码，不会自动东填充值。（PS：有例子提到将autocomplete设置为任意字符串也可以达到同样的效果，你可以试试）