iOS Safari 用相同的东西自动填充每个字段？

Question

我正在构建一个简单的表单，用户可以在其中输入他们的姓名/电子邮件和朋友的姓名/电子邮件。示例代码如下。

在除 iOS Safari 之外的所有浏览器中，自动填充功能仅填写前 2 个字段，但我的 iPhone 用我的姓名填写第 1 和第 3 字段，用我的电子邮件填写第 2 和第 4 字段。

如果我完全删除“名称”属性，问题仍然存在。如果我然后删除字段之前的文本或以不同的方式拼写名称/电子邮件，问题就会停止。就好像 iOS Safari 看到一个带有“名称”的字段并认为它是同一件事。

有没有办法解决这个问题？我只希望它只完成前 2 个字段，而使用 autocomplete="off" 什么都不做。

<div>My name: <input name="fullName" type="text"></div>
<div>My email: <input name="email" type="email"></div>
<div>Friend's name: <input name="friendFullName" type="text"></div>
<div>Friend's email: <input name="friendEmail" type="email"></div>

编辑#1

我刚刚尝试将这个问题复制到使用类似表单设计的其他网站上，我也遇到了这个问题。

在 iOS Safari 中打开它并尝试自动填充您的姓名/电子邮件：http://www.rightmove.co.uk/sendPropertyToFriend/sendPropertyToFriend.html?propertyIds=63218243&from=%2Fproperty-for-sale%2Fproperty-63218243.html

如果这听起来像是一个错误，我会向 Apple 报告并关闭这篇文章。但是 Apple 解决问题的速度太慢了，所以如果有解决方法的话会很好。

编辑#2

Chrome 按预期工作 - 它会自动填充前两个字段，并且仅当您单击/点击其中任何一个字段并选择自动填充选项时才会自动填充其他两个字段。

Answer 1

因此，我可以在 macOS 的 Safari 10.1.2 中重现此错误，并且我已经测试了一些场景以确切了解它何时发生。您的发现与我的结果几乎一致 - 如果该字段在其前面的文本中和/或其 HTML name= 属性中有 name 或 email，则 Safari 将其识别为可自动填充。

所以，虽然这个双管齐下的解决方案有点 hacky，但它肯定会阻止字段自动填充：

1. 隐藏这些字段的name= 属性以删除这些关键字。我用friendFn 代替friendFullName，用friendEm 代替friendEmail。

2. 使用装饰性的 ::before CSS 属性以 Safari 在自动填充时无法检测到的方式标记这些字段。

您可以在下面的这个 sn-p 中看到这些更改。希望这会有所帮助！

[data-label]::before {
  content: attr(data-label) ': ';
}

<div>My name: <input name="fullName" type="text"></div>
<div>My email: <input name="email" type="email"></div>
<div data-label="Friend's name"><input name="friendFn" type="text"></div>
<div data-label="Friend's email"><input name="friendEm" type="email"></div>