Ошибка автозаполнения кредитной карты Chrome

Question

Я следовал рекомендациям, указанным в this other Stack Overflow post, и использовал шаблон, найденный в the list of regexes used by Chrome, но по какой-то причине Chrome по-прежнему не обнаруживает, что мое поле является полем кредитной карты.

Safari обнаруживает это просто отлично.

Вот входной HTML, как показано на веб-инспектор:

<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. Может быть, это имеет к этому какое-то отношение. Кто знает!

Я установил тестовую страницу, чтобы другие могли играть с ней. Вы можете посетить https://entire.life/payment-form-test в Safari, и (если у вас есть автозаполнение и сохраненная на нем кредитная карта), он появится. Если вы посетили его в Chrome, он не выберет опцию автозаполнения. Даже после ввода первой буквы вашей карты.

Этот код является открытым исходным кодом. Вы можете увидеть источник для /payment-form-test страницы here.

Answer 1

Это будет работать, если вы добавите следующие атрибуты соответствующих элементов ввода:

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

Также я заметил, что Chrome не будет автозаполнен, если отсутствует одно из полей cc.

Вы можете играть здесь - https://jsfiddle.net/q4gz33dg/2/

Answer 2

Назовите поля с пометкой card_expiry_month и card_expiry_year. Я не уверен, почему ваши текущие имена не вызывают регулярное выражение, но изменение имен, похоже, работает.

http://jsfiddle.net/7b6xtns7/ (это немного неаккуратно, так как он не оказал)

Edit: Похоже заказ должен сделать с ним тоже. Если это не работает, попробуйте немедленно положить месяц/дату после поля ввода номера

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