如何通过字段标记实现Facebook In-App Browser内表单Auto-Fill功能

Facebook内置浏览器对标准HTML自动填充规则的适配有定制化逻辑，仅默认识别邮箱字段的情况是常见兼容问题，可以通过以下标记方法解决：

• 严格使用W3C标准的autocomplete属性值，不要使用自定义字段标识
  常用字段的标准属性配置参考：

  <!-- 名字 -->
  <input type="text" name="firstName" id="firstName" autocomplete="given-name">
  <!-- 姓氏 -->
  <input type="text" name="lastName" id="lastName" autocomplete="family-name">
  <!-- 完整姓名 -->
  <input type="text" name="fullName" id="fullName" autocomplete="name">
  <!-- 邮箱 -->
  <input type="email" name="email" id="email" autocomplete="email">
  <!-- 手机号 -->
  <input type="tel" name="phone" id="phone" autocomplete="tel">
  <!-- 住址 -->
  <input type="text" name="address" id="address" autocomplete="street-address">
  

• 输入框的name、id属性使用通用命名规则
  不要使用业务自定义的生僻命名，尽量和autocomplete属性的语义保持一致，比如名字字段避免使用user_xing、first_col这类自定义值，优先使用firstName、given-name这类通用命名。
• 确保所有输入框包裹在合法的<form>标签内
  不要使用div模拟表单结构做提交，Facebook内置浏览器的自动填充逻辑只会识别<form>节点下的输入字段。
• 新增扩展属性做兼容兜底
  对仍无法触发填充的字段，可以额外添加x-autocompletetype属性适配定制内核的识别逻辑，示例：

  <input type="text" name="firstName" autocomplete="given-name" x-autocompletetype="given-name">
  

常见踩坑注意：不要为了屏蔽浏览器默认填充提示给字段加autocomplete="off"属性，该配置会直接阻断所有自动填充能力的触发。
验证修改效果前请先清空Facebook应用缓存，避免旧页面缓存导致的兼容验证失效。

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