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

Question

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

<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，我认为这不是代码问题。

Answer 1

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

• https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
• https://greenido.github.io/Product-Site-101/form-cc-example.html

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

如果它们都为您工作，那么您请将它们与您的 html 进行比较。

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

正确付款方式的示例

<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 表单上启用自动完成

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

• <label>对所有<input>字段使用 a

• autocomplete为您的<input>标签添加一个属性并使用本指南填写它。

• 为所有标签正确命名您的name和autocomplete属性<input>

• 示例：

   <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">
  

如何命名你的标签

为了触发自动完成，请确保正确命名标签中的name和autocomplete属性<input>。这将自动允许在表单上自动完成。确保也有一个<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

请求自动完成（）

在这里阅读：

• https://developer.chrome.com/multidevice/requestautocomplete-faq
• https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
• https://blog.alexmaccaw.com/requestautocomplete

资源

• 当前用于自动完成的 WHATWG HTML 标准。
• 来自 Google 的“创建惊人的表单”。似乎几乎每天都在更新。优秀的阅读。
• 2015 年来自 Google 的“使用自动填充功能帮助用户更快地结帐”。