问题描述
最小复制示例（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"，但这在语义上是完全向后的（将字段误标记为某种类型的信用卡字段以防止自动检测信用卡字段）。
我为此提交了一个错误报告，希望对您有所帮助：