Как Chrome обнаруживает поля кредитной карты?

В некоторых формах запрос автозаполнения Chrome с автозаполнением кредитной карты.

EDIT: добавление снимка экрана. Это не то же самое, что автозаполнение браузера. Вам не нужно было вводить значение в той же форме раньше.

Screenshot

Как мне написать свою HTML-форму, чтобы браузер обнаружил их как поля кредитных карт и инициировал это поведение?

Пример работы с формой Stripe будет идеальным.

Ответ 1

Из этого ответа fooobar.com/questions/40163/..., похоже, что Chrome либо соответствует шаблону регулярного выражения для имени поля, либо форма явно использует атрибут x-autocompletetype, как это (В этом примере используется "somename", чтобы избежать смешивания вопросов, совпадающих с именем):

<input type="text" name="somename" x-autocompletetype="cc-number" />

Практически вы можете сделать и то, и другое, выбрав имя, которое соответствует, и x-autocompletetype:

<input type="text" name="ccnum" x-autocompletetype="cc-number" />

У вас есть источник просмотра окна ввода в вашем скриншоте? Это будет отображаться, если оно соответствует имени или атрибуту x-autocompletetype.

Ответ, который я связываю, содержит несколько ссылок для получения дополнительной информации; Я не повторял их здесь.

Другие комментарии:

Я знаю, что Chrome задает вопрос о том, следует ли сохранять информацию о кредитной карте (я этого не знаю), но я не знаю, вызывает ли этот вопрос этот вопрос независимо от того, как он его обнаружил. То есть я не уверен, что Chrome будет автозаполнять отдельные поля кредитных карт вместе с другими полями, или если вам нужно сохранить все это как кредитную карту.

Ваш вопрос состоял в том, как это сделать, а не в том. Но из комментария в вашем вопросе я согласен с тем, что вы можете не автозаполнять поля кредитных карт. Лично я нахожу, что это смущает, когда это происходит, даже зная, что это локально в моем браузере (особенно я чувствую это в отношении CVV и получаю удивительное сопротивление, когда я сообщаю об этом). Тем не менее, есть сообщения, которые расстраивают, когда клиент хочет его использовать, Chrome настроен с помощью кредитных карт, а веб-сайт блокирует его.

Ответ 2

Этот вопрос довольно старый, но у меня есть обновленный ответ на 2019 год!

Теперь вы можете указать своему браузеру, какие поля предназначены для информации о кредитной карте, просто указав <input> правильно.

Следующий ответ взят из моего оригинального ответа отсюда: fooobar.com/questions/40163/...

Здесь ссылка на официальный текущий стандарт WHATWG HTML для включения автозаполнения.

Google написал довольно хорошее руководство по разработке веб-приложений, удобных для мобильных устройств. У них есть раздел о том, как назвать входные данные в формах, чтобы легко использовать автозаполнение. Несмотря на то, что он написан для мобильных устройств, он применим как для настольных компьютеров, так и для мобильных устройств!

Как включить автозаполнение в HTML-формах

Вот несколько ключевых моментов, как включить автозаполнение:

  • Используйте <label> для всех ваших полей <input>
  • Добавьте атрибут 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="[email protected]" required autocomplete="email">
    
    <!-- note that "emailC" will not be autocompleted -->
    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
    placeholder="[email protected]" required autocomplete="email">
    
    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA"
    placeholder="+1-555-555-1212" required autocomplete="tel">
    

Как назвать ваши теги <input>

Чтобы запустить автозаполнение, убедитесь, что вы правильно назвали атрибуты name и autocomplete в своих тегах <input>. Это автоматически разрешит автозаполнение в формах. Убедитесь, что у вас есть <label>! Эту информацию также можно найти здесь.

Вот как назвать ваши входные данные:

  • имя
    • Используйте любой из них для name: name fname mname lname
    • Используйте любой из них для autocomplete:
      • name (для полного имени)
      • given-name (для имени)
      • additional-name (для второго имени)
      • family-name (для фамилии)
    • Пример: <input type="text" name="fname" autocomplete="given-name">
  • Электронное письмо
    • Используйте любой из них для name: email
    • Используйте любой из них для autocomplete: email
    • Пример: <input type="text" name="email" autocomplete="email">
  • Адрес
    • Используйте любой из них для name: address city region province state zip zip2 postal country
    • Используйте любой из них для autocomplete:
      • Для одного адреса введите:
        • street-address
      • Для двух адресных входов:
        • address-line1
        • address-line2
      • address-level1 (штат или провинция)
      • address-level2 (город)
      • postal-code (почтовый индекс)
      • country
  • Телефон
    • Используйте любой из них для name: phone mobile country-code area-code exchange suffix ext
    • Используйте любой из них для autocomplete: tel
  • Кредитная карта
    • Используйте любой из них для 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
  • Usernames
    • Используйте любой из них для name: username
    • Используйте любой из них для autocomplete: username
  • Пароли
    • Используйте любой из них для name: password
    • Используйте любой из них для autocomplete:
      • current-password (для форм входа)
      • new-password (для форм регистрации и смены пароля)

Ресурсы

Ответ 3

Спасибо @goodeye за то, что он направил мне правильный ответ.

Чтобы запустить автозаполнение кредитной карты,

  • SSL должен быть включен в вашей форме
  • Большинство вариантов стандартных имен полей кредитных карт должны работать, если SSL включен.

Здесь - ссылка на регулярные выражения, используемые Chrome для запуска обнаружения

Ответ 4

Chrome использует атрибут autocomplete во входах для автозаполнения. Это, вероятно, будет использоваться другими браузерами в будущем, если еще нет. Фактическое использование autocomplete заключается в том, чтобы указать, включено ли автозаполнение, указав autocomplete="off". Но хром использует то же самое для автозаполнения.

Автозаполнение и автозаполнение различаются, поэтому не запутайтесь.

Автозаполнение - это то, что Chrome использует для заполнения форм из того, что хранится в настройках автозаполнения в браузере Chrome.

Автозаполнение - это то, что все браузеры используют для запоминания того, что вы, возможно, ранее вводили в той же форме, предлагая значения при вводе. Поэтому, когда вы используете autocomplete="off" для входа, браузер перестает предлагать эти значения.

Возвращаясь к решению, для автозаполнения для работы используйте cc-number для номера карты, cc-name для имени держателя карты, cc-csc для cvc и cc-exp для даты истечения срока действия карты в вашем атрибуте autocomplete. Вот пример, который будет совместим с автозаполнением Chrome:

<div>
    <label for="frmNameCC">Name on card</label>
    <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
</div>
<div>
    <label for="frmCCNum">Card Number</label>
    <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
</div>
<div>
    <label for="frmCCCVC">CVC</label>
    <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
</div>
<div>
    <label for="frmCCExp">Expiry</label>
    <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
</div>

Ответ 5

Chrome также сканирует заполнители.

Пример: <input placeholder='dd-mm-yyyy'/> вызовет его превращение в поле кредитной карты.