Chrome 自动完成功能认为我的“名字”字段是信用卡

olu*_*pan 5 html google-chrome credit-card autosuggest reactjs

该问题已在其他地方问过,但没有回答。谷歌浏览器认为我的输入

<input name="firstName" id="firstName" type="text" placeholder="John" font-size="16" class="sc-fznKkj XyZMK">

是一张信用卡,如自动完成字段检查器(实验标志 thingy)和提供已保存信用卡的自动完成所示。

它也在 lastName 字段和另一个数字类型字段以另一种形式执行此操作。

我不明白的是,它只是在我们的开发环境中按预期工作,并且只在暂存中变得疯狂(两者几乎都是相同的部署过程,相同的 s3 + cloudfront 托管,相同构建的相同代码)。

有什么线索吗?

它变得更奇怪:将name字段更改为first-name而不是firstName修复它。我不需要更改两个输入名称,只有第一个更改。但是我应该可以随意命名我的领域,不是吗?

Run*_*ipt 5

在 HTML 表单中,该autocomplete属性用于告诉浏览器应该将哪种类型的数据输入到特定的输入中。

(更多信息参见 MDN 网络文档。)

例如,对于名字,您应该使用autocomplete="given-name",对于姓氏,您应该使用autocomplete="family-name"。

将这些属性添加到被错误识别的输入中应该可以解决您的问题。


至于为什么有些输入还没有autocomplete属性但仍然可以正确识别:当没有autocomplete找到属性时,浏览器会尝试“智能地”决定应该将什么放入该字段。

为此,name最常用的是该属性。如果是,username或者password例如,浏览器可能会识别这些词,因为它们是非常常见的输入描述。如果是myinput6,则浏览器将无法识别任何内容。

在您的情况下,浏览器似乎可以识别name="first-name",但无法识别略有不同的name="firstName". 但是,正如您所说,您应该能够为您的name属性赋予任何您想要的值,为此,您应该使用该autocomplete属性。