Chrome信用卡自動填充未被觸發

Question

我遵循this other Stack Overflow post中給出的建議，並使用the list of regexes used by 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看到，我使用的反應。也許這與它有關。誰知道！

我已經設置了一個測試頁面，以便其他人可以使用它。您可以在Safari中訪問https://entire.life/payment-form-test，並且（如果您啓用了自動填充並保存了信用卡），它會彈出。如果您在Chrome中訪問它，它將不會彈出自動填充選項。即使在輸入卡片的第一個字母后。

此代碼是開源的。您可以看到/payment-form-test頁面here的來源。

Answer 1

如果你添加下面的屬性到相應的輸入元素它將工作：

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

另外我注意到，如果其中一個cc字段丟失，Chrome將不會自動完成。

你可以在這裏玩 - https://jsfiddle.net/q4gz33dg/2/

Answer 2

爲您的過期字段命名card_expiry_month和card_expiry_year。我不知道爲什麼你的當前名稱不會觸發正則表達式，但更改名稱似乎工作。

http://jsfiddle.net/7b6xtns7/（這是一個有點亂，因爲它沒有渲染）

編輯： 看起來排序沒有什麼關係了。如果不起作用嘗試號碼輸入後場把月/日立即

http://jsfiddle.net/c86Lmo0L/

Answer 3

接受的答案是偉大的，以爲我只是附和一些文件和關於REACT（標記爲這個問題）的說明..

需要作出反應你傳遞的屬性爲autoComplete="cc-number"（注意camelCase），否則它將默認爲autocomplete="off"。

更多信息：

• 陣營屬性：https://facebook.github.io/react/docs/tags-and-attributes.html
• 有用的例子：https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
• https://html.spec.whatwg.org/multipage/forms.html#autofill