Chrome信用卡自动填充未被触发 [英] Chrome credit card autofill not being triggered

问题描述

我遵循这个其他Stack Overflow帖子给出的建议并使用中的模式Chrome浏览器使用的正则表的列表，但由于某些原因，Chrome仍未检测到我的字段是信用卡字段。

Safari检测到它就好。

以下是输入HTML，如web检查器所示：

 < input class =controlid =card_numbertype =telname =card_number
 value =autocorrect =offspellcheck =offautocapitalize =off
 placeholder =卡号data-reactid =。0.1.1.0.0.5.0.0
 x-autocompletetype =cc-numberautocompletetype =cc-number> 
  

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

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

这段代码是开源的。您可以看到 / payment-form-test 页面的来源 here 。 解决方案

以下各个输入元素的属性：

• autocomplete =cc-number


• autocomplete =cc-exp


• autocomplete = cc-csc

另外我注意到，如果其中一个cc字段丢失，Chrome将不会自动完成。

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

I followed the advice given in this other Stack Overflow post and used a pattern found in the list of regexes used by Chrome, but for some reason Chrome is still not detecting that my field is a credit card field.

Safari detects it just fine.

Here's the input HTML, as shown by the web inspector:

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

Yes, as you can see from the data-reactid, I am using React. Maybe that has something to do with it. Who knows!

I've set up a test page so that others can play with it. You can visit https://entire.life/payment-form-test in Safari, and (if you have autofill enabled and a credit card saved to it), it will pop up. If you visit it in Chrome, it will not pop up the autofill option. Even after typing the first letter of your card.

This code is open source. You can see the source for the /payment-form-test page here.

解决方案

It will work if you add following attributes to respective input elements:

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

Also I noticed that Chrome will not autocomplete if one of the cc fields is missing.

You can play around here - https://jsfiddle.net/q4gz33dg/2/

这篇关于Chrome信用卡自动填充未被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！