Как запустить автозаполнение в Google Chrome? - PullRequest
Новая
       2

Как запустить автозаполнение в Google Chrome?

174 голосов
/ 28 августа 2011

Хотелось бы узнать, существует ли какая-то специальная разметка для включения функции автозаполнения Chrome для определенной формы.Я только нашел вопросы о том, как его отключить, но я хотел бы знать, могу ли я добавить какую-то разметку в HTML-код, чтобы сообщить браузеру «это ввод для адреса» или «это почтовый индекс»поле ", чтобы правильно заполнить его (предполагается, что пользователь активировал эту функцию).

Ответы [ 10 ]

172 голосов
/ 21 марта 2012

ОБНОВЛЕНИЕ на 2017 год: Похоже, что ответ от Кэти содержит больше актуальной информации, чем мой.Будущие читатели: отдайте свой голос за ее ответ .

Это прекрасный вопрос, к которому на удивление трудно найти документацию.На самом деле, во многих случаях вы обнаружите, что функция автозаполнения Chrome «просто работает».Например, следующий фрагмент html создает форму, которая, по крайней мере для меня (Chrome v. 18), автоматически заполняется после нажатия в первом поле: 

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

Однако этот ответ неудовлетворителен,как это оставляет решение в сфере "магии".Углубившись вглубь, я узнал, что Chrome (и другие браузеры с автозаполнением) в первую очередь полагаются на контекстные подсказки для определения типа данных, которые должны быть заполнены в элементах формы.Примеры таких контекстных подсказок включают name элемента ввода, текст, окружающий элемент, и любой текст-заполнитель.

Однако недавно команда Chrome признала, что это неудовлетворительное решение, и ониначал настаивать на стандартизации в этом вопросе. Очень информативный пост от группы веб-мастеров Google недавно обсуждал эту проблему, объясняя:

К сожалению, до сих пор веб-мастерам было трудно обеспечить, чтобы Chrome и другие формыЗаполняющие провайдеры могут правильно проанализировать свою форму.Существуют некоторые стандарты;но они накладывают тяжелое бремя на реализацию веб-сайта, поэтому они практически не используются на практике.

(«Стандарты», на которые они ссылаются, это более поздняя версия спецификации упомянуто в ответе Avalanchis выше.)

Пост Google продолжает описывать предложенное ими решение (что встречается серьезной критикой в ​​комментариях к посту).Они предлагают использовать для этой цели новый атрибут:

Просто добавьте атрибут к элементу ввода, например поле адреса электронной почты может выглядеть следующим образом:

<input type=”text” name=”field1” x-autocompletetype=”email” />

... где x- означает «экспериментальный» и будет удален, если и когда это станет стандартом.Прочитайте пост для получения более подробной информации, или, если вы хотите копать глубже, вы найдете более полное объяснение предложения на вики-сайте Whatwg .

ОБНОВЛЕНИЕ: Как указано в этих проницательных ответах , все регулярные выражения, используемые Chrome для идентификации / распознавания общих полей, можно найти в autofill_regex_constants.cc.utf8.Поэтому, чтобы ответить на исходный вопрос, просто убедитесь, что имена ваших HTML-полей соответствуют этим выражениям.Вот некоторые примеры:

  • имя: "first.*name|initials|fname|first$"
  • фамилия: "last.*name|lname|surname|last$|secondname|family.*name"
  • электронная почта: "e.?mail"
  • адрес (строка 1): "address.*line|address1|addr1|street"
  • почтовый индекс: "zip|postal|post.*code|pcode|^1z$"
62 голосов
/ 31 января 2017

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

Вот ссылка на документацию WHATWG для включения автозаполнения.

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

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

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

  • Использовать <label> для всехВаши <input> поля
  • Добавьте атрибут autocomplete к своим <input> тегам и заполните его, используя guide .
  • Назовите свои атрибуты 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 (почтовый индекс)
      • 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 (для форм регистрации и смены пароля)

Ресурсы

38 голосов
/ 31 мая 2013

Из моего тестирования тег x-autocomplete ничего не делает.Вместо этого используйте теги autocomplete для входных тегов и установите их значения в соответствии со спецификацией HTML здесь http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field.

Пример: 

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

Для тега родительской формы требуется autocomplete = "on" и method = "POST".

5 голосов
/ 18 октября 2011

Вам необходимо правильно присвоить элементам имена, чтобы браузер автоматически их заполнил.

Вот спецификация IETF:

http://www.ietf.org/rfc/rfc3106.txt 1

2 голосов
/ 28 мая 2013

Похоже, мы получим больше контроля над этой функцией автозаполнения, в Chrome Canary появится новый экспериментальный API, который можно использовать для доступа к данным после запроса у пользователя:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

новая информация от Google:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

1 голос
/ 06 ноября 2014

Я только что поработал со спецификацией и получил хороший рабочий пример - включая еще несколько полей. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

Он содержит 2 отдельных адресаобласти, а также разные адреса.Протестировал его также на iOS 8.1.0, и кажется, что он всегда заполняет все поля одновременно, в то время как рабочий стол Chrome автоматически заполняет адрес по адресу.

0 голосов
/ 22 июля 2018

В моем случае $('#EmailAddress').attr('autocomplete', 'off'); не работает. Но следующие работы на Chrome версии 67 от jQuery. 

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
0 голосов
/ 28 ноября 2017

Вот новый список "Имен" автозаполнения Google.Существуют все поддерживаемые имена на любом разрешенном языке.

autofill_regex_constants.cc

0 голосов
/ 19 сентября 2017
0 голосов
/ 07 ноября 2014

Вот реальный ответ:

Разница только в самой этикетке.«Nom» происходит от «Name» или «Nome» на португальском языке.

Итак, вот что вам нужно:

  • Обертка формы;
  • A <label for="id_of_field">Name</label>
  • An <input id="id_of_field"></input>

Ничего больше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...