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

Question

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

如果您有包含单词“电子邮件”或“电子邮件”一个placeholder属性的表单元素<input>（也许只是“邮件” - 我没有测试），那么即使该字段绝对不是电子邮件地址，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> 

正如你所看到的，只是参考有关电子邮件什么是下面的标记：

占位符=“EG-推荐

我用下面的表单字段标记测试这，谷歌，电子邮件，星期日泰晤士报”

您不能关闭的字段自动完成在任何浏览器这些天，所以autocomplete="off"是一个不行。

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

Answer 1

对此的解决方案是：

1. 从占位符删除单词“电子邮件”共
2. 使用隐藏域和偏移量做一些疯狂的JavaScript和/或CSS的解决方法隐藏视口外的字段
3. 要“偷偷摸摸”并使用类似的Unicode字母来将“email”字样复制到替代字词中。

我不喜欢选项1，因为我不应该。没有人应该 - 在这种情况下，Safari仅仅是做错了自己正在做的事情，并且让Web开发人员无法控制自动填充行为。

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

选项2 - 实现JS和/或CSS的负载来克服这种情况也是不好的做法，只应作为绝对最后的手段使用，如果没有其他工作。

所以我选择了后一种选择。我发现Unicode的一个非常有用的名单confusables这里：

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

这份清单帮我找到一个替代“E”：

0435; 0065; MA＃（е→E）CYRILLIC小写字母IE→拉丁小写字母E

不幸的是这并没有改变自动填充的行为，这就是为什么我怀疑这可能找字“邮件”为以及“电子邮件”。

我无法找到“M”一个适当的替代，但我没有找到一个为“一”：

0430; 0061; MA＃（а→A）CYRILLIC小写字母A→拉丁小写字母A

这样做的伎俩和Safari不再自动填充我的非电子邮件领域用户的电子邮件地址。

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

占位符= “如建议，谷歌，е米а IL，星期日泰晤士报”