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

Question

这里有 10 个 gazillion 线程。如何禁用浏览器自动完成行为，例如How do you disable browser Autocomplete on web form field / input tag? .我不想要设置autocomplete="off"对于我的表单字段。作为MDN documentation如何做到这一点:

It is important to know that if you turn off autocomplete, you are breaking [WCAG rule 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… ？

同样，我不是寻找告诉我如何禁用自动完成的答案，或者提示这是重复的问题，询问如何那个。我很高兴让浏览器帮助用户填写我的表单字段，但我想帮助它变得更……有用。

(或者，我是否误解了 autocomplete 的目的？它是否仅用于登录凭据、送货地址、信用卡号等用例，我应该 将 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>

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

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