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

Question

这里有十个无数的线程。如何禁用浏览器自动完成行为，例如如何禁用网络表单字段/输入标记上的浏览器自动完成行为？。我不想设置我autocomplete="off"的表单字段。正如关于如何执行此操作的MDN 文档所述：

\n\n

\n

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

\n

\n\n

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

\n\n

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

\n\n

\n\n

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

\n\n

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

\n\n

再说一遍，我并不是在寻找告诉我如何禁用自动完成功能的答案，也不是在抱怨这是询问如何做到这一点的问题的重复。我很高兴让浏览器帮助用户填写我的表单字段，但我希望帮助该帮助变得更加\xe2\x80\xa6有用。

\n\n

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

\n

Answer 1

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

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

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

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

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

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

如果没有至少其中 2 个项目，自动完成功能将无法工作（同样取决于您使用的浏览器）。

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

正如您已经怀疑的那样，域并不是一个考虑因素。

不过，您可以做以下几件事：-

“旧”方式（当前方式）

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

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

尽管浏览器已针对用户名和密码字段进行了优化，但它不适用于用户名和密码字段。它也不能保证成功，但它将改善大多数油田的“跨站点污染”。

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

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

使用新的自动完成选项，这是最新“生活标准”的一部分。

支持不清楚（即在 caniuse.com 上找不到这些，只能“关闭”），但我知道它可以在 Google Chrome 和 Opera 中使用，在 Safari 中也可以使用（有些项目受支持，有些不支持），总比没有好！

以下是您可以使用的完整 53 个选项的列表。

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

对于每个其他浏览器，选择权在您，浏览器嗅探并关闭自动完成功能，或者只是将其保留，因为它是“预期行为”（即使这不是一个很好的体验）。

另一个有趣的功能

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

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

例如：-

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

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

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