Safari自动填充使用占位符属性填充任何字段，其中包含单词“email”和用户的电子邮件地址

Question

我最近发现了这个bug，它似乎影响了iOS 10.3.3上最新版本的Safari（10）。它可能适用于以前的版本甚至桌面版本，但这是我发现错误的特定版本。

如果你有一个带有<input>属性的placeholder元素，其中包含单词“email”或“e-mail”（也许只是“mail” - 我没有测试过），那么Safari将使用用户的电子邮件地址自动填充该字段即使该字段绝对不应该是电子邮件地址。

我使用以下表单字段标记对此进行了测试：

<div class="field full-width">
    <label class="required" for="MarketingSource" aria-required="true">What prompted you to get in touch with us today?</label>
    <input data-val="true" data-val-length="This field is limited to 255 characters" data-val-length-max="255" data-val-required="Please tell us how you heard about xxx" id="MarketingSource" name="MarketingSource" placeholder="E.g. recommended, Google, email, Sunday Times" type="text" value=""/>    
</div>

如您所见，对电子邮件的任何引用都在以下标记中：

占位符=“例如推荐，谷歌，电子邮件，星期日泰晤士报”

这些天你无法关闭任何浏览器中字段的自动完成功能，所以autocomplete="off"是不行的。

如何让Safari忽略此字段，而不是使用电子邮件地址错误地自动填充？它正在搞乱后端的营销归因数据。

Answer 1

The solution to this is to either:

1. 从占位符中删除“email”一词
2. 使用隐藏字段和偏移来隐藏视口外的字段，做一些疯狂的javascript和/或CSS解决方法
3. “偷偷摸摸”并使用类似的Unicode字母复制单词“email”与替代品。

我不喜欢选项1，因为我不应该这样做。没有人应该 - 在这种情况下，Safari做出它正在做的事情是完全错误的，并且让web开发者无法控制自动填充行为。

其次，删除“电子邮件”一词可能会影响我们用户真正输入的营销归属数据，因此这不是我公司愿意做的事情。

选项2也是如此 - 实现JS和/或CSS的加载来克服这种情况是不好的做法，如果没有别的办法，只能用作绝对的最后手段。

所以我选择了后一种选择。我在这里找到了一个非常有用的Unicode混淆列表：

http://www.unicode.org/Public/security/latest/confusables.txt

这份清单帮我找到了另一种“e”：

0435; 0065; MA＃（→→e）CYRILLIC SMALL LETTER IE→LATIN SMALL LETTER E

不幸的是，这并没有改变自动填充行为，这就是为什么我怀疑它可能会寻找“邮件”和“电子邮件”这个词。

我无法找到“m”的足够替代品，但我找到了一个“a”：

0430; 0061; MA＃（а→a）CYRILLIC SMALL LETTER A→LATIN SMALL LETTER A

这样做就可以了，Safari不再使用用户的电子邮件地址自动填充我的非电子邮件字段。

最终的占位符现在看起来像这样：

占位符=“例如，推荐，Google，mаil，星期日泰晤士报”