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

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

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

Как мне написать свою 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 (для форм регистрации и смены пароля)

Ресурсы

Текущий стандарт WHATWG HTML для автозаполнения.
"Создайте удивительные формы" из Google. Кажется, будет обновляться почти ежедневно. Отличное чтение.
"Помогите пользователям быстрее оформить заказ с помощью автозаполнения" от Google в 2015 году.

Ответ 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'/> вызовет его превращение в поле кредитной карты.