Chrome为什么认为我的表单是信用卡表单？

如何解决Chrome为什么认为我的表单是信用卡表单？

最小复制示例（jsfiddle，您需要在浏览器中保存一张信用卡才能看到此问题）：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form method="post" action="Test.html" autocomplete="off">
        <div>
            <label>Basisnummer</label>
            <input type="text" />
            <input type="text" />
            <br>

            <label>Markenname</label>
            <input type="text" />
        </div>
    </form>
</body>
</html>

Chrome 85.0.4183.121和Edge 85.0.564.63都认为这是信用卡表格，因此决定帮助我的用户输入他们的信用卡数据，这根本没有用（因为这不是信用卡表格）），并迷惑了我的用户：

我知道以下解决方法：

混淆第一个标签：
```
<label>Basisnum<span style="display:none">x</span>mer</label>
```
可以，但是要在我们的应用程序中实现此功能，我将付出很多工作（标签没有经过硬编码，因为它们可以本地化）。
autocomplete="cc-csc"可以工作（即，禁用自动补全功能），但是从语义上讲是完全错误的（这不是CC-CSC字段！），因此我宁愿避免这种情况，以防止进一步麻烦浏览器决定对cc-csc字段进行“有用的处理”的道路。例如，将其设置为cc-csc可以使移动浏览器显示仅数字键盘（这很有意义，因为csc始终是数字），而我绝对不希望那样。

无论如何，我宁愿使用浏览器而不是反对，因此我的问题是：

为什么会发生？（由于它同时在Chrome和“新” Edge中都发生，因此一定是Chromium的问题，而且由于Chromium是开源的，我们应该能够看到发生在这里，对吧？）

奖金问题：我如何（正式）告诉Chromium这不是信用卡表格？

注释：

autocomplete="nope"（或autocomplete="...some random data..."）没有影响。
这只是一个最小的示例-整个页面包含名称，类，id和诸如此类的内容。
我非常感谢人们在评论中提出解决方法。不过，我宁愿了解为什么发生这种情况，而不是尝试随机的解决方法（当然，如果可能的话...）。

解决方法

您可以明确地将自动完成值设置为与The HTML autocomplete attribute

最接近的近似值

对于Basisnummer，我使用了“ tel”；对于市场名称，我使用了“ organization”：

<form method="post" action="Test.html" autocomplete="off">
    <div>
        <label>Basisnummer</label>
        <input type="text" autocomplete="tel"/>
        <input type="text" />
        <br>

        <label>Markenname</label>
        <input type="text" autocomplete="organization"/>
    </div>
</form>

它确实禁用了卡号自动完成功能。 JSfiddle

这是因为Chome对德语信用卡表格的自动检测过于激进。特别是您的表单包含

三个或更多字段，
其中一个被标记为...nummer，并且
另一个被标记为...name。

这是一个更简单的最小示例，它使用当前的Canary版本的Chrome（87.0.4278.0）再现了相同的问题：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <div>
        <label>Nummer</label>
        <input type="text" />
        <input type="text" />
        <br>

        <label>Name</label>
        <input type="text" />
    </div>
</body>
</html>

查看Chromium的来源，我们可以看到以下正则表达式用于检测信用卡号字段（components/autofill/core/common/autofill_regex_constants.cc）：

const char kCardNumberRe[] =
    "(add)?(?:card|cc|acct).?(?:number|#|no|num|field)"
    "|(?<!telefon|haus|person|fødsels)nummer"  // de-DE,sv-SE,no
    "|カード番号"                              // ja-JP
    "|Номер.*карты"                            // ru
    "|信用卡号|信用卡号码"                     // zh-CN
    "|信用卡卡號"                              // zh-TW
    "|카드"                                    // ko-KR
    // es/pt/fr
    "|(numero|número|numéro)(?!.*(document|fono|phone|réservation))";

我们可以看到，（几乎）每个带有“ ... nummer”（=“数字”表示德语）的每个字段都被视为信用卡号字段！

一旦找到信用卡号字段，则随后标记为“ ...名称”的字段将被视为信用卡名称字段（credit_card_field.cc）：

// Sometimes the cardholder field is just labeled "name". Unfortunately
// this is a dangerously generic word to search for,since it will often
// match a name (not cardholder name) field before or after credit card
// fields. So we search for "name" only when we've already parsed at
// least one other credit card field and haven't yet parsed the
// expiration date (which usually appears at the end).
if (fields > 0 && !credit_card_field->expiration_month_ &&
    ParseField(scanner,base::UTF8ToUTF16(kNameOnCardContextualRe),&credit_card_field->cardholder_,{log_manager,"kNameOnCardContextualRe"})) {
  continue;

不幸的是，没有任何“官方”方式可以告诉Chrome“这确实不是信用卡字段”。 most common workaround是autocomplete="cc-csc"，但这在语义上是完全向后的（将字段误标记为某种类型的信用卡字段以防止自动检测信用卡字段）。

我为此提交了一个错误报告，希望对您有所帮助：

https://bugs.chromium.org/p/chromium/issues/detail?id=1133769

Chrome为什么认为我的表单是信用卡表单？

如何解决Chrome为什么认为我的表单是信用卡表单？

解决方法

相关推荐