Ввод текста автозаполнения

Я знаю, что есть много решений JavaScript, но есть ли метод HTML5 для ввода текста с автозаполнением? Элемент datalist-это почти то, что мне нужно, за исключением того, что он позволяет вводить пользовательские значения, а не ограничивать вас тем, что есть в списке.

5 ответов


в HTML5 есть тег autocomplete атрибут, который может быть указан как on или off в поле.

вот пример:

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

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

  • на ключ проблема в решении использовать эту функцию является одним из совместимости браузера. Лучше всего проверить несколько браузерах, чтобы убедиться, что он работает. caniuse.com делает поддержку выглядит довольно плохо, но я не вижу никакого вреда, используя его, чтобы помочь тем, у кого есть современные брауэры.

другие подсказки про autocomplete С W3Schools, не ненавидьте в этом случае, поскольку он охватывает основы:

  • когда автозаполнение включено, браузер автоматически завершает значения на основе значений, введенных пользователем ранее.
  • возможно к есть автозаполнение " on "для формы и "off" для конкретного ввода поля, или наоборот.
  • в атрибут autocomplete работает с и следующие типы: текст, поиск, url, tel, электронная почта, пароль, datepickers, диапазон и цвет.

вы должны попробовать datalist элемент. Это четко определено в рекомендации консорциума W3C в HTML5, вероятно, лучший вариант на столе сейчас и в ближайшем будущем.

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

каждый элемент option, являющийся потомком элемента datalist, который не отключено, и чье значение является строкой, которая не является пустой строка, представляет собой предложение. Каждое предложение имеет стоимостью и a метка.

Google chrome и хром браузеры на основе поддерживает его с v21.x (по состоянию на декабрь 2014, текущая версия-39, проверьте состояние совместимости другие браузеры тут) в Firefox и Опера также поддерживает в течение длительного времени. Современный(!) IE версии частично поддерживает datalist.

демо: большой рабочая реализация datalist Эйдзи Китамура.

Polyfill : также проверить RelevantDropdown. Это HTML5 datalist polyfill, который зависит от jQuery и Modernizr.

попробуйте запустить этот пример:

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

ссылка W3:https://www.w3.org/TR/html5/forms.html#the-datalist-element


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

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

следующий ответ из моего первоначального ответа отсюда:https://stackoverflow.com/a/41965106/1696153

все вам нужно сделать сейчас, чтобы вызвать автозаполнение это имя input правильно тег.

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

ресурсы


с HTML5, google предложить стиль автозаполнения ввода возможен без каких-либо Javascript!

посмотреть в этой статье: HTML5-стиль "Google предложить"

однако он еще не полностью поддерживается. Примеры из статьи будут работать только в Opera на данный момент.

на данный момент, вероятно, лучше всего использовать хорошо протестированную библиотеку с широкой поддержкой браузера, такой как jQuery UI, которая имеет автозаполнение штучка.


я следовал этому руководству MSDN для обеспечения ввода datalist, чтобы разрешить только текст, который соответствует параметрам в datalist. Он использует API проверки HTML Contstraint:

http://msdn.microsoft.com/en-us/magazine/dn133614.aspx