解决方法是：

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>

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

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

这些天你无法关闭任何浏览器中字段的自动填充功能，因此autocomplete="off"是禁止的。

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

Answer 1

解决方法是：

从占位符中删除“email”一词
使用隐藏字段和偏移来隐藏视口外的字段，执行一些疯狂的javascript和/或CSS解决方法
“偷偷摸摸”并使用类似的Unicode字母复制“电子邮件”这个词与替代品。

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

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

选项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

不幸的是，这并未改变自动填充行为，这就是为什么我怀疑它可能会寻找“mail”以及“email”这个词。< / p>

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

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

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

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

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

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

1 个答案:

解决方法是：