Chrome自动填充认为我的“firstName”字段是信用卡。

Question

Google Chrome 认为我的输入

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

在自动完成字段检查器中显示的信用卡，以及提供已保存的信用卡。它也会在lastName字段和另一个表单中的某个数字类型字段上执行相同的操作。

我不明白的是，在我们的开发环境中它正常工作，但只有在暂存环境中出现问题（两者几乎相同的部署过程，相同的s3 + cloudfront托管，相同版本的代码）。

更奇怪的是：将name字段更改为first-name而不是firstName可以解决问题。我不需要更改两个输入名称，只需更改第一个即可。但我应该能够随心所欲地命名我的字段，不是吗？

- olup otilapan

---

Chrome在检测信用卡号码字段时也使用<label>文本。检测是语言特定的。我们有一个英语客户显示出这个问题，但将客户端操作系统语言更改为瑞典语可以解决它。请注意，该页面没有本地化支持，并且始终以瑞典语呈现。 - Mattias Wallin

Answer 1

在HTML表单中，autocomplete属性用于告诉浏览器特定输入框应该输入什么类型的数据。

（更多信息请参见MDN web docs。）

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

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

---

关于为什么有些输入框没有 "autocomplete" 属性但仍被正确识别的原因：当没有找到 "autocomplete" 属性时，浏览器会尝试“聪明地”决定应该放入该字段的内容。为此，最常用的是 "name" 属性。例如，如果是 "username" 或 "password"，则浏览器可能会认出这些单词，因为它们是非常常见的输入描述。 如果是 "myinput6"，那么浏览器将无法识别任何内容。

在您的情况下，似乎浏览器识别了 "name =“first-name”"，但难以识别稍有不同的 "name =“firstName”"。 但是，正如您所说，您应该能够为您的 "name" 属性赋任何值，并且要做到这一点，您应该使用 "autocomplete" 属性。

- Run_Script