如何解决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"
,但这在语义上是完全向后的(将字段误标记为某种类型的信用卡字段以防止自动检测信用卡字段)。
我为此提交了一个错误报告,希望对您有所帮助:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。