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

Question

这里有十个专精的线程。如何disable浏览器自动完成行为，例如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…？
• 再次，我
• not
寻找答案，该答案告诉我如何

disable自动完成，或者抱怨这是询问重复问题的重复方式that

。我很高兴让浏览器帮助用户填写我的表单字段，但我想让该帮助更加……有用。（或者，我是否会误解autocomplete的目的？它仅用于登录凭证，送货地址，信用卡号等用例，而我应该正在使用autocomplete="off"还可以吗？）

这里有十个专精的线程。如何禁用浏览器自动完成行为，例如如何禁用Web表单字段/输入标签上的浏览器自动完成功能？我不想设置autocomplete = ...

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

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

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

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

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

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

没有这些项目中的至少两项，自动完成将不起作用（但仍然取决于您使用的浏览器）。

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

但是您可以做几件事：-

“旧”方式（当前方式）>

为输入提供不寻常的名称属性（即name="xA123IIasd"）。

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

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

您可能还想给该字段添加一个与标准标签稍有不同的标签，只要它不会影响可用性（即“您的名字”而不是“名字”）。

[更好的新方法[不完全支持]

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

支持尚不清楚（即在caniuse.com上找不到这些，只有'off'），但我知道它可以在Google Chrome和Opera中工作，还可以在Safari中工作（某些项目受支持，有些则不受支持），它比什么都没有！

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

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

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

另一个有趣的功能

新自动完成功能的最后一项功能是'sections'。

这使您可以将自动完成功能“范围”到特定的一组字段。

例如：-

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

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

您还将注意到，我在自动完成功能中使用'托运'来指示使用送货地址，此处的另一个选项是'开票'（在撰写本文时，这是地址类型的仅有两个选项）。

Answer 1