html - iOS Safari 会用相同的内容自动填充每个字段吗？

Question

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

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

如果我完全删除“name”属性，问题仍然会发生。如果我随后删除字段之前的文本或以不同的方式拼写名称/电子邮件，问题就会停止。就好像 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 报告并关闭这篇文章。但苹果解决问题的速度太慢了，所以如果有解决办法的话那就太好了。

编辑#2

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

Answer 1

因此，我可以在 macOS 版 Safari 10.1.2 中重现此错误，并且我测试了一些场景以准确了解其发生时间。你的发现与我的非常一致 - 如果该领域有 name或email在其前面的文本中和/或在其 HTML name= 中属性，Safari 将其识别为可自动填充。

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

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>