React项目Chrome浏览器autoComplete属性失效 求2021年可用解决方案

适配2021版Chrome的可行解决方案 #

方案1：使用Chrome专属的autocomplete特殊值 #

2020年后Chrome调整了自动填充规则，会直接忽略autocomplete="off"、自定义随机值这类配置，你可以根据输入框类型设置官方认可的禁止填充属性值：

• 普通文本/手机号/邮箱类输入框：设置autoComplete="one-time-code"，Chrome会判定为一次性验证码输入框，不会触发历史数据填充
• 密码类输入框：设置autoComplete="new-password"，Chrome会判定为新密码设置场景，不会填充已保存的旧密码

修改后代码示例：

<input
     autoComplete="one-time-code"               
     key={name}
     value={value}
     onChange={onChange}
     className="input--custom"
     id={name}
     name={name}
     type={type}
/>

方案2：添加隐藏占位输入框劫持填充逻辑 #

Chrome会默认优先填充表单内第一个出现的文本、密码输入框，你可以在真实业务输入框前插入两个隐藏的占位输入框承接自动填充内容，不会影响正常业务逻辑：

{/* 放置在表单最顶部，完全隐藏不占用页面空间 */}
<input type="text" name="fake_user" style={{display: 'none'}} />
<input type="password" name="fake_pwd" style={{display: 'none'}} />

{/* 下方放置你的原有输入框 */}
<input
     autoComplete="off"                
     key={name}
     value={value}
     onChange={onChange}
     className="input--custom"
     id={name}
     name={name}
     type={type}
/>

方案3：修改输入框的name/id为无语义值 #

Chrome自动填充的核心匹配逻辑是识别name、id属性的语义，如果你用了username、phone、email这类Chrome可识别的语义化值，无论autocomplete设置什么都可能触发填充。你可以将name、id改为无意义的随机字符串，业务逻辑单独维护字段映射关系即可。

内容的提问来源于stack exchange，提问作者Indiestartupman