html - iOS Safari 正在用同样的东西自动填充每个字段吗？

Question

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

在除 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 中重现此错误，并且我测试了一些场景以查看它发生的确切时间。您的发现与我的非常一致 - 如果该字段有 name或 email在它前面的文本中，和/或在它的 HTML 中 name=属性，Safari 将其识别为可自动填充。

因此，虽然这个双管齐下的解决方案有点老套，但它肯定会阻止字段自动填充:

1. 隐藏 name=这些字段的属性以删除这些关键字。我用过 friendFn而不是 friendFullName , 和 friendEm而不是 friendEmail .

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

您可以在下面的代码片段中看到这些更改。希望这对您有所帮助!

[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>