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

编程问答 2022-12-04

问题描述

最近，我们向我们的应用程序（公司标准）添加了一个自定义 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 开始自动填充信用卡信息：

enter image description here

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

我确信信用卡自动填充功能仅在提供正确的 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>

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

解决方法

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

但是，如果您的 input 具有正确的 name 和/或 autocomplete 属性 - 它会根据这些属性工作。

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

autocompletegoogle-chromehtmlreactjsreactjs