未触发 Chrome 信用卡自动填充

IT技术 javascript google-chrome reactjs credit-card
2021-05-23 16:47:51

我遵循了另一个 Stack Overflow 帖子中给出的建议，并使用了Chrome 使用的正则表达式列表中的一个模式，但由于某种原因，Chrome 仍然没有检测到我的字段是信用卡字段。

Safari 检测到它就好了。

这是输入 HTML，如 Web 检查器所示：

<input class="control" id="card_number" type="tel" name="card_number" 
    value="" autocorrect="off" spellcheck="off" autocapitalize="off"
    placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0" 
    x-autocompletetype="cc-number" autocompletetype="cc-number">

是的，正如您从 中看到的data-reactid，我正在使用 React。也许这与它有关。谁知道！

我已经设置了一个测试页面，以便其他人可以使用它。您可以在 Safari 中访问https://entire.life/payment-form-test，并且（如果您启用了自动填充并保存了信用卡），它将弹出。如果你在 Chrome 中访问它，它不会弹出自动填充选项。即使在输入卡片的第一个字母之后。

此代码是开源的。您可以在此处查看该/payment-form-test页面的来源。

3个回答

如果您将以下属性添加到相应的输入元素，它将起作用：

  • autocomplete="cc-number"
  • autocomplete="cc-exp"
  • autocomplete="cc-csc"

我还注意到，如果缺少 cc 字段之一，Chrome 将不会自动完成。

你可以在这里玩 - https://jsfiddle.net/q4gz33dg/2/

命名您的到期字段card_expiry_month和card_expiry_year. 我不确定为什么您当前的名称不会触发正则表达式，但更改名称似乎有效。

http://jsfiddle.net/7b6xtns7/（因为没有渲染所以有点乱）

编辑：看起来订购也与它有关。如果这不起作用，请尝试在数字输入字段之后立即放置月份/日期

http://jsfiddle.net/c86Lmo0L/

接受的答案很好，我想我只是附上一些关于 React 的文档和注释（标记为这个问题）。

React 要求您将属性传递为autoComplete="cc-number"（注意驼峰式大小写），否则将默认为autocomplete="off".

更多信息：

其它你可能感兴趣的问题
上一篇媒体查询不适用于 React App 中的样式组件 下一篇通过 api 路由/强大的 next.js 文件上传 - 不工作