Ввод текста автозаполнения
Я знаю, что есть много решений 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
(для регистрации и смены пароля)
-
- использовать любой из них для
ресурсы
- текущий стандарт HTML WHATWG для автозаполнения.
- "создание удивительных форм" из Google. Кажется, обновляется почти ежедневно. Отличное чтение.
- "помощь пользователям оформить заказ быстрее с автозаполнением" от Google в 2015 году.
с HTML5, google предложить стиль автозаполнения ввода возможен без каких-либо Javascript!
посмотреть в этой статье: HTML5-стиль "Google предложить"
однако он еще не полностью поддерживается. Примеры из статьи будут работать только в Opera на данный момент.
на данный момент, вероятно, лучше всего использовать хорошо протестированную библиотеку с широкой поддержкой браузера, такой как jQuery UI, которая имеет автозаполнение штучка.
я следовал этому руководству MSDN для обеспечения ввода datalist, чтобы разрешить только текст, который соответствует параметрам в datalist. Он использует API проверки HTML Contstraint: