Как Chrome обнаруживает поля кредитных карт?
в некоторых формах Chrome Autofill запрашивает автозаполнение кредитной карты.
EDIT: добавление скриншота. Это не то же самое, что автозаполнение браузера. Вам не нужно было вводить значение в той же форме раньше.
Как мне написать HTML-форму, чтобы браузер обнаружил их как поля кредитной карты и запустил это поведение?
пример его работы с формой полосы был бы идеальным.
5 ответов
из этого ответа https://stackoverflow.com/a/9795126/292060, похоже, что 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 настроен с кредитными картами, и веб-сайт блокирует его.
спасибо @goodeye для направления меня к правильному ответу.
для запуска автозаполнения кредитной карты,
- SSL должен быть включен в форме
- большинство вариантов стандартных имен полей кредитных карт должны работать, если SSL включен.
здесь является ссылкой на regexes Chrome использует для запуска обнаружения
этот вопрос довольно старый, но у меня есть обновленный ответ на 2017!
теперь вы можете сказать своему браузеру, какие поля предназначены для информации о кредитной карте, просто назвав <input>
правильно.
следующий ответ из моего первоначального ответа отсюда:https://stackoverflow.com/a/41965106/1696153
вот ссылка на официальный текущий стандарт HTML WHATWG для включения автозаполнения.
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="name@example.com" required autocomplete="email"> <!-- note that "emailC" will not be autocompleted --> <label for="frmEmailC">Confirm Email</label> <input type="email" name="emailC" id="frmEmailC" placeholder="name@example.com" 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
(zip код) 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
- использовать любой из них для
-
Логинов
- использовать любой из них для
name
:username
- использовать любой из них для
autocomplete
:username
- использовать любой из них для
-
пароль
- использовать любой из них для
name
:password
- использовать любой из них для
autocomplete
:-
current-password
(для регистрационных форм) -
new-password
(для регистрации и смены пароля)
-
- использовать любой из них для
ресурсы
- текущий стандарт HTML WHATWG для автозаполнения.
- "создание удивительных форм" из Google. Кажется, обновляется почти ежедневно. Отличное чтение.
- "помощь пользователям оформить заказ быстрее с автозаполнением" от Google в 2015 году.
Chrome использует autocomplete
атрибут во входных данных для автозаполнения. Это, вероятно, будет использоваться другими браузерами в будущем, если еще нет.
autocomplete
фактическое использование-это сказать, включено ли автозаполнение или нет, указав autocomplete="off"
. Но chrome использует то же самое для автозаполнения.
автозаполнение и автозаполнение отличаются, так что не путайтесь.
автозаполнение это то, что chrome использует для заполнения форм из того, что хранится в настройки автозаполнения в браузере chrome.
автозаполнение это то, что все браузеры используют, чтобы помнить, что вы, возможно, ввели ранее в той же форме, предлагая значения при вводе. Поэтому, когда вы используете autocomplete="off"
на входе браузер перестает предлагать эти значения.
возвращаясь к решению, для автозаполнения для работы использовать cc-number
на номер карты, cc-name
на имя держателя карты, cc-csc
для cvc и cc-exp
на срок действия карты в autocomplete
атрибут.
Вот пример, который будет совместим с автозаполнением chrome:
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
источник: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
Chrome также сканирует через заполнители.
пример: <input placeholder='dd-mm-yyyy'/>
вызовет его, чтобы стать полем кредитной карты.