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