浏览器表单自动填充调研

参考

1.浏览器表单自动填充问题
2. 如何更好的去除谷歌浏览器中 input 自动填充背景
3. 设置 input 控件自动填充的样式
4. 聊聊:autofill和autocomplete自动填充

总结

1. 自动填充保存用于登录此网站的密码，这个动作是需要用户手动确认的，如果用户没有保存则不会有，网站的这个功能主要是为了存储密码，如果是个普通表单，那么不会被浏览器记录（chrome 对设置了 name 的表单会有记录）
2. 自动填充分两种，一种是直接添加到表单中（非交互自动填充），一种是提供下拉选择（交互自动填充）
   1. firefox 中如果一个域名下只有一个账号密码记录，那么会自动添加到表单中
   2. chrome（非无痕模式） 中一个域名下无论有多少个账号密码记录，都会自动添加最近使用的到表单中
   3. safari 不会自动添加到表单中，需要下拉选择
3. 表单不在 Form 中，可以使用 自动填充，但是不能保存自动填充值
4. 必须存在至少一个 type=“password” 的表单
   1. 只存在一个 type=“password” 的表单 会被自动填充密码
   2. 存在一个 type=“text” 表单 + 一个 type=“password” 表单，type=“text” 在上边会被填充，type=“text” 在下边不会被自动填充
   3. 存在一个 type=“password” 表单 + 多个 type=“text” 表单则 type=“password” 上边最近的 type=“text” 会被自动填充
   4. 如果存在 多个 type=“password” 且不在一个 Form 中则各论各的，在一个 Form 中则只有第一个 type=text + type=password 结构会有正常的自动填充提醒，其余的只有 type=password 的表单会有密码自动填充提醒(safari 除外)，且不同浏览器表现不一致
5. readonly 和 disabled 属性会影响自动填充, name 的值对是否自动填充影响不大，但是 chrome 上如果一个 name=‘abc’ 的表单有了提交，那么下次再遇到 name=‘abc’ 的表单，会有历史记录的提示
6. autoComplate 的语义
   1. autoComplete=“off” 无效，很多浏览器在很多情况下都是不支持这样设置来关闭自动提示的，参考 https://www.zhangxinxu.com/wordpress/2022/09/css-autofill-html-autocomplete-off/
   2. autoComplete=‘new-password’ 可以阻止一部分情况下的自动回填
   3. autoComplete 属性的值还有很多，但是兼容性很差，参考 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete ,
7. 如何禁用自动填充 – 主要禁用 “自动添加到表单中” 这个行为
   1. type=“password” 的表单增加 readonly 属性，然后在表单的 focus 事件中将 readonly 置为 false；不建议用，因为我们用的组件库组件有可能借用了 input 标签的 onFocus，两者叠加不好处理
   2. autocomplete=‘new-password’ 可以禁用“自动添加到表单中” 这个行为，type=text 表单的 focus 也不会出现下拉选项（safari 除外）, 但是 type=password 的表单 focus 会出现下拉，且选中后，type=text 的表单也会被填充（firefox 除外）
   3. 在 type=text 和 type=password 之间加入一对 input 表单，并将其样式设置为隐藏(设置 display: none 对于 chrome 来说不会得到预期的结果，需要设置成决定定位，然后将节点定位到看不见的地方)，来使得浏览器这两个隐藏的表单自动填充,（注意：chrome 要实现同样的效果需要叠加 autocomplete=‘new-password’ 一起来实现）

  
    
  
  {/*  是 react 原生组件不是组件库组件，所以不影响组件库收集表单数据 */}
  
  
 
  
    
  

  
    
      登录
    
  

7. 如何给单个 type=text 表单增加 自动填充行为
   1. 在 type=text 之下增加一个 type=password 的表单，这个表单要隐藏 UI（还是不能通过 display: none 隐藏，否则在 safari 上不会出现密码填充下拉框，可以使用 position: absolute 定位到看不见的地方）
   2. 需要注意的是这个 type=text 表单仅能自动填充 账户密码信息中的账户.

  
    
  
  {/*  是 react 原生组件不是组件库组件，所以不影响组件库收集表单数据 */}
  

  
    
      登录
    
  

8. 如何设置 input 自动填充样式
   1. nput 设置内阴影为 预期的颜色即可（不透明）
   2. input 高度设置为 0，背景剪裁方式设置为 content-box 这样浏览器自动回填的区域颜色即使有值也不会显示出来，然后消失的 input 高度通过 padding 撑开，padding 多大由开发者决定

/* 方案 1. input 设置内阴影为 预期的颜色即可（不透明） */
input:autofill {
  box-shadow: 0 0 0px 1000px white inset;
}

/* 方案 2. input 高度设置为 0，背景剪裁方式设置为 content-box 这样浏览器自动回填的区域颜色即使有值也不会显示出来，然后消失的 input 高度通过 padding 撑开，padding 多大由开发者决定 */
.form-input input {
  height: 0;
  background-clip: content-box;
  padding: 1.2em 0.5em;
}

11. 不同浏览器版本，表现也有不一致的可能