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

解决方法是：

从占位符中完全删除 “电子邮件” 一词
做一些疯狂的事情 javascript and/or CSS 使用隐藏字段和偏移量将字段隐藏在视口之外的解决方法
“偷偷摸摸”并使用类似的 Unicode 字母来复制“电子邮件”一词的替代词。

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

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

选项 2 也是如此 - 实施 JS 负载 and/or 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"

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

Safari autofill populates any field with a placeholder attribute containing the word "email" with the user's email address

html

forms

safari

user-experience

autocomplete

解决方法是：