Chrome 在没有名称或自动填充属性的输入中自动填充信用卡

Question

最近，我们在我们的应用程序（公司标准）中添加了自定义 React 组件库。它有一个限制——不允许设置 name 或 autocomplete 属性。因此，我们的一些输入在更新后丢失了 name 属性。

更新后我们呈现的输入如下所示：

<div class="search-input">
  <div class="sc-bYwzuL dnjiBM">
    <input data-test-id="navigation_customer-search-input" placeholder="Search for a customer" rows="1" value="">
  </div>
</div>

并且 Chrome 开始自动填充信用卡信息：

也许有人知道什么会导致这种行为？

我确信信用卡自动填充只有在提供正确的 name 或 autocomplete 属性时才可用（如 here 所述）。

其他详细信息：

在库更新输入没有自动完成问题之前呈现如下：

<div class="search-input-container">
  <input type="text" name="search" placeholder="Search for a customer" data-test-id="search__search-input__input" value="">
</div>

此外，当我将完全相同的版本部署到具有不同域（我有一段时间没有使用它）的不同环境时 - 我没有看到自动填充问题。

Answer 1

根据 this thread Chrome 使用众包（当许多人在字段中输入名字时 - Chrome 会将其归类为名字）来确定如何自动完成场.

但是，如果您的 input 具有正确的 name and/or autocomplete 属性 - 它会根据该属性工作。

应用此修复程序并进行测试后，我可以说，这可能是解决问题的唯一方法。

Chrome 在没有名称或自动填充属性的输入中自动填充信用卡

Chrome autofill credit card in input without name or autofill attributes

html

reactjs

google-chrome

autocomplete