【问题标题】：Why credit card autofill doesn't work when production build but it works with npm start in my react application?为什么信用卡自动填充在生产构建时不起作用，但它在我的反应应用程序中与 npm start 一起使用？
【发布时间】：2020-10-24 00:38:42
【问题描述】：

我的 react 应用程序中有一个非常简单的表单来获取用户信用卡信息，如下所示。

<form autocomplete="on">
    <input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
    <input name="cc-exp-month"/>
    <input name="cc-exp-year"/>
    <input name="cc-exp"/>
</form>

我还以“反应方式”进行了测试

我希望浏览器（在本例中为 safari）显示信用卡选项，如下图所示。

有趣的事实：当我使用npm start 启动我的应用程序时（如上图所示），我可以重现预期的行为（以上述两种形式）。但是，如果我运行 npm run build 并提供 ./build 文件夹，则信用卡选项不会显示。

这就是我仍然不明白的地方，为什么相同的代码以一种方式工作，但它不能以另一种方式工作？

PS1：我在这两种情况下都使用 HTTPS 进行测试。

PS2：我测试了不同的输入名称，autocomplete="cc-number" 等。但它们都不起作用。由于代码适用于npm start，我认为不是代码问题。

【问题讨论】：

标签： reactjs react-redux autofill credit-card

【解决方案1】：

要让自动填充功能在 iOS Safari 上运行，页面必须通过 HTTPS 提供，并且证书不应是自签名证书。它必须是一个给定有效 CA。希望这会有所帮助

【讨论】：

【解决方案2】：

遇到同样的问题，check safari preferences

确保您没有使用私人模式或任何其他访客帐户！

【讨论】：

【解决方案3】：

您的 HTML 需要非常正确地设置，以便浏览器拾取 UI 流并触发自动填充功能。它还取决于浏览器的支持，例如 Opera 没有为我触发，而 chrome 正在工作。您可以尝试以下操作：

我在下面添加了许多工作示例，请查看其他答案的链接。此答案包含来自以下提到的资源和 SO 答案的内容。

如果它们都适合你，那么你请将它们与你的 html 进行比较。

正如我在上面看到的，您的 html 格式不正确，甚至不包含 <label> 标记以及 <input>

An example of proper payment form

<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">

<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">

<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

作为提醒，我想在这里添加

如何在您的 HTML 表单上启用自动完成功能

以下是有关如何启用自动完成功能的一些要点：

为所有<input> 字段使用<label>
将autocomplete 属性添加到您的<input> 标签并使用此guide 填写。
为所有<input> 标签正确命名name 和autocomplete 属性

示例：

 <label for="frmNameA">Name</label>
 <input type="text" name="name" id="frmNameA"
 placeholder="Full name" required autocomplete="name">

 <label for="frmEmailA">Email</label>
 <input type="email" name="email" id="frmEmailA"
 placeholder="name@example.com" required autocomplete="email">

 <!-- note that "emailC" will not be autocompleted -->
 <label for="frmEmailC">Confirm Email</label>
 <input type="email" name="emailC" id="frmEmailC"
 placeholder="name@example.com" required autocomplete="email">

 <label for="frmPhoneNumA">Phone</label>
 <input type="tel" name="phone" id="frmPhoneNumA"
 placeholder="+1-555-555-1212" required autocomplete="tel">

How to name your tags

为了触发自动完成功能，请确保在 <input> 标记中正确命名 name 和 autocomplete 属性。这将自动允许在表单上自动完成。确保也有<label>！也可以在https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values

找到此信息

以抄送为例

信用卡
- 对 name 使用以下任意一种：ccname cardnumber cvc ccmonth ccyear exp-date card-type
- 对 autocomplete 使用以下任意一种：
  - cc-name
  - cc-number
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc-type

requestAutocomplete()

在这里阅读：

资源

Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google。好像几乎天天更新。精彩的阅读。
"Help Users Checkout Faster with Autofill" from Google 2015 年。

【讨论】：