如何在不关闭它们的情况下改进浏览器自动完成建议？

Question

这里有十个数不胜数的线程。如何禁用浏览器自动完成行为，例如How do you disable browser Autocomplete on web form field / input tag?。我确实不想为我的表单字段设置autocomplete="off"。正如MDN documentation 说明的那样：

重要的是要知道，如果您关闭自动完成功能，就会违反 [WCAG 规则 1.3.5]

因此，作为禁用自动完成的替代方法，我想了解作为开发人员是否可以帮助浏览器为我的表单字段提供更相关的建议。

事实上，我明白为什么许多开发人员（或他们的老板/客户）最终希望完全摆脱该功能。例如，当我将 <input name="title"> 添加到我在本地开发的一个完全不相关的网站时，我的浏览器突然开始随机提供我几年来在多个 StackExchange 网站上提出/编辑的问题的随机样本：

如何帮助浏览器改善这里的用户体验？浏览器在选择建议的文本时会使用哪些因素？

• 显然没有考虑域，除非我通过 localhost 进行的测试触发了比正常情况更多的混杂自动完成？
• 显然，至少有一个浏览器认为该字段的 name 属性具有通用语义含义，因为 Chrome 会建议我输入到其他网站的内容，而这些网站恰好在其表单中也使用了 name="title"。
• 表单本身的任何元数据是否会影响建议？例如。如果我将此输入包装在 <form id="my-particular-form-has-nothing-to-do-with-qa-sites-btw"> 中，是否某些浏览器会将其自动完成功能限定为仅建议以前的 name="title" 条目进入 my-particular-form…？

再一次，我不是在寻找告诉我如何禁用自动完成功能的答案，或者抱怨这是重复询问如何做到这一点的问题 /em>。我很高兴让浏览器帮助用户填写我的表单字段，但我想帮助这些帮助变得更加……有用。

（或者，我是否误解了autocomplete 的用途？它是否仅用于登录凭据、送货地址、信用卡号等用例，我应该 strong> 将autocomplete="off" 用于其他所有内容？）

Answer 1

当前的自动完成行为一团糟！

浏览器使用各种方法来确定字段是否应自动完成。

例如典型的用户名、密码组合，浏览器会查找两个字段，一个是输入电子邮件，另一个是密码。

他们还会查看name 属性以及type 属性，以进一步尝试确定字段是否应自动完成。

最后，根据浏览器，他们还会寻找他们希望一起看到的字段，并使用关联的标签来确定哪些字段是哪些（这就是为什么将标签与表单字段正确链接很重要的原因！）。

这方面的一个典型例子是信用卡，他们希望看到持卡人姓名、信用卡号、有效期等。

如果没有这些项目中的至少 2 个，自动完成将无法工作（再次取决于您使用的浏览器）。

由于每个浏览器都有实现此功能的独特方式，因此有时很难防止结果的“跨站点污染”。

域不是您已经怀疑的考虑因素。

但是，您可以做几件事：-

“旧”方式（当前方式）

给输入一个不寻常的名称属性（即name="xA123IIasd"）。

因为这是确定字段用途的主要因素之一（就浏览器而言）并且不会以任何方式干扰用户体验，所以这是一个不错的选择。

它不适用于用户名和密码字段，尽管浏览器已经为此进行了优化。它也不能保证成功，但会改善大多数领域的“跨站污染”。

您可能还想尝试为该字段提供与标准稍有不同的标签，只要它不影响可用性（即“您的名字”而不是“名字”）。

新的（更好的）方式[不完全支持]

使用新的autocomplete options，这是最新“生活标准”的一部分。

支持不清楚（即在 caniuse.com 上找不到这些，只有“关闭”），但我知道它适用于 Google Chrome 和 Opera，有点适用于 Safari（支持某些项目，有些不支持），它更好总比没有！

这是您可以使用的list of the full 53 options。

通过将这些添加到您的输入中，您可以控制浏览器将作为自动完成选项公开的内容。

对于其他所有浏览器，您可以自行选择，浏览器嗅探并关闭自动完成功能，或者将其保留为“预期行为”（即使它不是很好的体验）。

另一个有趣的功能

新的自动完成功能的最后一个功能是“部分”。

这允许您将自动完成“限定”到一组特定的字段。

例如：-

<fieldset>
    <legend>Package One Ship To</legend>
    <label> Address:     <textarea name="pack1Add1" autocomplete="section-packageone shipping street-address"></textarea> </label>
    <label> City:        <input name="pack1Add2" autocomplete="section-packageone shipping address-level2"> </label>
    <label> Post Code: <input name="pack1Postcode" autocomplete="section-packageone shipping postal-code"> </label>
</fieldset>
<fieldset>
    <legend>Package Two Ship To:</legend>
    <label> Address:     <textarea name="pack2Add1" autocomplete="section-packagetwo shipping street-address"></textarea> </label>
    <label> City:        <input name="pack2Add2" autocomplete="section-packagetwo shipping address-level2"> </label>
    <label> Postal Code: <input name="pack2Postcode" autocomplete="section-packagetwo shipping postal-code"> </label>
</fieldset>

这意味着您可以在一个页面上使用自动完成两次，因为每个组都与其他组分开处理！

您还会注意到，我在自动完成中使用“送货”来指示使用送货地址，这里的另一个选项是“账单”（在撰写本文时，这是地址类型的唯一两个选项）。