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

Question

我最近发现了这个错误，它似乎影响了 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>

如您所见，有关电子邮件的唯一引用是在以下标记中:

placeholder="E.g. recommended, Google, email, Sunday Times"

现在您无法在任何浏览器中关闭字段的自动完成功能，因此 autocomplete="off"是不行的。

我怎样才能让 Safari 忽略这个字段，而不是用电子邮件地址错误地自动填充它？它在后端搞乱了营销归因数据。

Answer 1

对此的解决方案是:

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

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

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

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

我无法为 “m” 找到合适的替代品，但我确实为 “a” 找到了替代品:

0430 ; 0061 ; MA # ( а → a ) CYRILLIC SMALL LETTER A → LATIN SMALL LETTER A

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

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

placeholder="E.g. recommended, Google, еmаil, Sunday Times"