网站Webkit自动填充功能失效问题排查求助

以下是针对WebKit内核浏览器（如Safari）登录表单无法触发自动填充的核心排查点：

1. 检查表单字段核心属性 #

WebKit的自动填充机制严格依赖字段的name和autocomplete属性，必须匹配标准值：

• 用户名/邮箱字段：需设置name="username"或name="email"，同时指定autocomplete="username"或autocomplete="email"
• 密码字段：需设置name="password"，登录场景下指定autocomplete="current-password"
• 禁止使用自定义命名（如name="user_id"、name="passwd"），也不能将autocomplete设为off/false这类阻止填充的值

示例正确写法：

<form>
  <input type="email" name="email" autocomplete="email" placeholder="邮箱">
  <input type="password" name="password" autocomplete="current-password" placeholder="密码">
  <button type="submit">登录</button>
</form>

2. 确认表单结构合规 #

• 登录字段必须被<form>标签直接包裹，不能仅用div等容器替代；即使是前端异步提交的表单，也要保留<form>标签（可设action="#"或空值）
• 避免在表单内嵌套过多无关DOM元素；动态渲染的模态框表单，需确保渲染完成后<form>和字段的DOM结构完整、属性正确

3. 排查隐藏字段干扰 #

如果表单内存在隐藏的用户名/密码字段（如用于记住密码的隐藏输入），WebKit可能优先识别这些隐藏字段，导致可见字段无法触发填充，需移除多余的同类型隐藏输入框

4. 动态渲染场景的特殊处理 #

若登录表单是通过JS动态插入DOM的（比如点击按钮后才渲染模态框）：

• 确保在插入DOM前就设置好所有核心属性（name、autocomplete），而非插入后再修改
• 避免UI框架自动生成的非标准属性覆盖原生属性，比如部分框架默认添加autocomplete="off"，需手动覆盖为正确值

5. 对比其他网站的差异 #

结合你提供的对比截图，重点检查：

• 其他网站是否用完整的<form>包裹字段
• 他们的字段name和autocomplete属性是否符合标准
• 是否存在你表单中没有的辅助属性（如autocorrect="off"，虽非必须，但可能影响识别）

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