如何在不关闭浏览器的情况下改善其自动完成建议? [英] How to improve browser autocomplete suggestions without turning them off?

问题描述

这里有十个专精的线程.如何禁用浏览器自动完成行为，例如，部分最新的生活标准".

支持尚不清楚(即在caniuse.com上找不到这些，只有'off')，但是我知道它可以在Google Chrome和Opera中使用，在Safari中也可以使用(某些项目受支持，有些则不受支持)，效果更好比什么都没有！

这是列表您可以使用的全部53个选项.

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

对于其他所有浏览器，您都可以选择，浏览器嗅探并关闭自动完成功能，或者仅将其保留为预期行为"(即使这不是很好的体验).

另一个有趣的功能

新自动完成功能的最后一项功能是部分".

这使您可以将自动完成作用域"到一组特定的字段.

例如:-

 < fieldset>< legend>将一艘船运送至</legend><标签>地址:< textarea name =" pack1Add1"autocomplete ="section-packageone运输街道地址"</textarea></label><标签>城市:<输入名称="pack1Add2"autocomplete ="section-packageone运输地址级别2".</label><标签>邮政编码:<输入名称="pack1Postcode"；autocomplete =部分包装的运输邮政编码".</label></fieldset>< fieldset>< legend>将两个货件打包到:</legend><标签>地址:< textarea name =" pack2Add1"autocomplete ="section-packagetwo装运街道地址"</textarea></label><标签>城市:<输入名称="pack2Add2"autocomplete ="section-packagetwo运送地址级别2"></label><标签>邮政编码:<输入名称="pack2Postcode"autocomplete ="section-packagetwo运输邮递区号"></label></fieldset> 

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

您还将注意到，我在自动完成功能中使用托运"来指示使用送货地址，这里的另一个选项是开票"(在撰写本文时，这是地址类型的仅有两个选项)./p>

There are ten gazillion threads on here re. how to disable browser autocomplete behavior, e.g. How do you disable browser Autocomplete on web form field / input tag?. I do not want to set autocomplete="off" for my form fields. As the MDN documentation for how to do that states:

It is important to know that if you turn off autocomplete, you are breaking [WCAG rule 1.3.5]

So as an alternative to disabling autocomplete, I want to understand whether as a developer I can help the browser make its suggestions for my form fields more relevant.

As it is, I can see why many developers (or their bosses/clients) do end up wanting to be rid of the feature entirely. For example, when I added an <input name="title"> to a completely unrelated website I was developing locally, my browser suddenly started offering me a random sampling of questions I'd asked/edited across several StackExchange sites over several years:

How can I help the browser improve the user experience here? What factors do browsers use when choosing what text to suggest?

• clearly the domain is not taken into consideration, unless my testing via localhost is triggering more promiscuous autocomplete than normal?
• apparently at least one browser considers the field's name attribute to have universal semantic meaning, since Chrome is suggesting content I typed into other sites which happened to also use name="title" within their forms.
• does any metadata on the form itself affect the suggestions? E.g. if I wrapped this input in a <form id="my-particular-form-has-nothing-to-do-with-qa-sites-btw"> might some browsers scope their autocomplete to only suggest previous name="title" entries into my-particular-form…?

Again, I am not looking for answers that tell me how to disable autocomplete or complaints that this is a duplicate of questions asking how to do that. I am happy to let the browser help the user fill in my form fields, but I want to help that help be more…helpful.

(Or, do I misunderstand the purpose of autocomplete to begin with? Is it only intended to be used for use cases like login credentials, shipping addresses, credit card number, etc. and I should be using autocomplete="off" for everything else?)

解决方案

Current Auto Complete Behaviour is a mess!

Browser use various methods to determine if a field should be auto-complete.

For example the typical username, password combo a browser will look for two fields, one of which is type email and the other type password.

They also look at the name attribute as well as the type attribute to further try and determine whether a field should be auto-completed.

Finally depending on the browser they also look for fields that they expect to see together and use associated labels to work out what fields are which (which is why it is important to properly link labels with form fields!).

A prime example of this would be credit cards where they would expect to see cardholder name, credit card number, expiry etc.

Without at least 2 of these items auto-complete won't work (yet again depends on which browser you use).

Because each browser has a unique way of implementing this feature it is sometimes difficult to prevent 'cross site contamination' of results.

Domain is not a consideration as you already suspected.

However there are a couple of things you can do:-

The 'old' way (current way)

Give the input an unusual name attribute (i.e. name="xA123IIasd") .

As this is one of the primary factors in determining what a field is for (as far as a browser is concerned) and does not interfere with the user experience in any way it is a great option.

It won't work on username and password fields though as browsers have optimised for that. It also doesn't guarantee success but it will improve 'cross site contamination' for most fields.

You may also want to try giving the field a slightly different label than standard, as long as it doesn't impact usability (i.e. "Your First Name" instead of "First Name").

The new (better) way [not fully supported]

Use the new autocomplete options, part of the latest 'living standard'.

Support is unclear (i.e. can't find these on caniuse.com, only 'off') but I know it works in Google Chrome and Opera, kinda works in Safari (some items supported, some not), it is better than nothing!

Here is a list of the full 53 options you can use.

By adding these to your inputs you can control what the browser will expose as options for autocomplete.

For every other browser, choice is yours, browser sniff and switch autocomplete off or just leave it as it is 'expected behaviour' (even if it is not a great experience).

One more interesting feature

One final feature that the new autocomplete has is 'sections'.

This allows you to 'scope' the auto complete to a particular set of fields.

For example:-

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

This means you can use auto complete twice on one page as each group is treated seperately from the other groups!

You will also note I use 'shipping' within the auto-complete to dictate to use the shipping address, the other option here is 'billing' (those are the only two options for address types at time of writing).

这篇关于如何在不关闭浏览器的情况下改善其自动完成建议?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！