为什么信用卡自动填充在生产构建时不起作用，但它在我的反应应用程序中与 npm start 一起工作？

Why credit card autofill doesn't work when production build but it works with npm start in my react application?

我的 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>

我也在“react-way”中测试过

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

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

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

PS1：我正在使用 HTTPS 测试这两种情况。

PS2：我测试了不同的输入名称，autocomplete="cc-number" 等。但其中 none 有效。由于代码适用于 npm start，我认为这不是代码问题。

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

遇到同样的问题，check safari preferences

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

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

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

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

正如我在上面看到的那样，您 html 的格式不正确，并且 <input>

中甚至没有包含 <label> 标签

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

中找到

例如 CC

  • 信用卡
    • 对 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

请求自动完成()

阅读此处：

资源