Как сделать подсказку в input в html

Как сделать вывод подсказок в input?

Доброго дня!
Вопрос такой.
Допустим есть поле ввода текста, в котором юзер вводит определенные запросы.
(Собака, кошка, попугай, козел. 😉 )
И как сделать так что когда он начинает вводить «Ко» у него появляется список из предложений «Кошка» «Козел»

И от этого то же вопрос, как к каждому из этих запросов назначить свою ссылку.

Заранее спасибо за помощь. Не судите строго)

• Вопрос задан более трёх лет назад
• 4327 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 3

Павел Корнилов @KorniloFF Куратор тега JavaScript
Работаю по font-end / JS

Нужно в массив все слова, используемые в подсказках, запихивать. А по мере ввода слова фильтровать по введенным символам. Конечно коряво получится и ресурсоёмко, но зато не придется нейронную сеть писать.

Подсказывающий текст

В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, при получении фокуса исходный текст должен пропадать. Это делается с помощью атрибута placeholder , значением которого служит любой текст. Подсказка делается для полей , , , , , и , иными словами, везде, где вводится текст.

Подсказывающий текст отображается серым цветом, исчезает при получении фокуса и снова появляется, если фокус теряется. Если в поле с подсказкой ввести любой текст, то подсказка больше не появится. Также её не будет при наличии атрибута value с непустым значением.

В примере 1 показано добавление подсказки к полям формы для создания авторизации.

Пример 1. Подсказывающий текст

HTML5 IE 10+ Cr Op Sa Fx

Результат примера в браузере Chrome показан на рис. 1.

Рис. 1. Вид полей с подсказывающим текстом

placeholder, ::placeholder и :placeholder-shown

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]

Email Хорошо

Стилизация: изменить цвет placeholder CSS

Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder . Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition .

Поменять стиль поля ввода с placeholder CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder .

[placeholder]

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder .

.raz:placeholder-shown

Подсказка пропадает при получении фокуса и

.raz:focus::placeholder

В конце длинного обрезанного подсказывающего текста поставить многоточие

  placeholder="name@site.ru ">

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

Отчество Обязательно заполняется при наличии
Отчество Обязательно заполняется при наличии
Сделать смещающиеся или всплывающие в

 .raz < position: relative; >.raz span < position: absolute; bottom: 0; left: 2px; opacity: .5; visibility: hidden; transition: .2s; >.raz input:placeholder-shown ~ span < visibility: visible; >.raz input:placeholder-shown:focus ~ span, .raz input:not(:placeholder-shown) ~ span Email

 .raz < position: relative; >.raz span < position: absolute; bottom: 50%; left: 2px; opacity: 0; visibility: hidden; transition: .3s; >.raz input:not(:placeholder-shown) ~ span Email

Плавающие метки неоднородны с метками элементов других типов веб-формы. Их менее контрастный цвет хуже различим. [medium.com]

ФИО Возраст Плохо
Эффект placeholder для

Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable . [whatwg.org]

Древний метод на память, изменяющий value JavaScript

• Атрибут title
• Как сделать placeholder для
• Убрать уголок у textarea
• input::before или input::after

CoMiGo Games Стоит добавить тот факт, что placeholder в Мозилле и Хроме серьёзно отличаются — у Мозилки он с 50% прозрачностью, а в Хроме непрозрачный. Поэтому в Хроме они особо хреново распознаются как заглушка пустого поля. Поэтому я везде дополнительно пихаю такой вот код:

::-moz-placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder

NMitra Да, мне тоже нравится полупрозрачный плейсхолдер. Только вот нужно писать разные правила с селекторами с префиксами, в которых полнейшее разночтение

::-webkit-input-placeholder < >input:-ms-input-placeholder < >input::-ms-input-placeholder < >input:-moz-placeholder < >input::-moz-placeholder < >input::placeholder

CoMiGo Games Ну, один такой блок кода всё равно можно добавить и перетерпеть этот момент 🙂 Так, конечно, в реальном мире разночтения отсутствуют только в том случае, если ты пишешь гибридное веб-приложение, которое всегда поставляется вместе со своим определённым вшитым браузером (как у меня, хо-хо))) Чтобы автоматически добавлялись всякие такие браузерные вариации, люди придумали препроцессоры CSS (которые берут файлы на своём языке и создают на их основе CSS) и постпроцессоры (которые работают на основе простого CSS и делают его ещё круче). Из последних известен PostCSS, из первых я предпочитаю Stylus. Надо во всём этом разбираться, да, но когда разберёшься и наделаешь себе шаблонов проектов — всё идёт на поток и на конфигурацию этих радостей современного интернета не обращаешь внимание 🙂 В общем, теперь, если будет свободное время, ты знаешь, на что его ещё можно потратить 😀 NMitra Это всё уже почти в прошлом: новые префиксы к свойствам браузеры не добавляют. С существующими нельзя добиться нормального отображения во всех версиях браузеров (IE6 и т.п.). Так что я просто отрубаю какой-то эффект для старых версий. Единственное, сморю, чтобы элемент был пусть не таким красивым, ровным и аккуратным, зато доступным. Например, надпись из span видна только при поддержки :placeholder-shown :

.raz span < visibility: hidden; >.raz input:placeholder-shown ~ span < visibility: visible; >.raz input:placeholder-shown:focus ~ span, .raz input:not(:placeholder-shown) ~ span

Атрибут placeholder

Атрибут placeholder задает подсказку в поле ввода HTML формы.

Подсказка placeholder нужна для того, чтобы указать пользователю, что именно следует вводить в данное поле. Сама подсказка будет расположена в поле ввода, но, в отличие от атрибута value , будет пропадать автоматически при попытке ввести текст.

Применить CSS стили к подсказке placeholder вы можете с помощью псевдоэлемента placeholder .

Пример

Давайте полю ввода установим подсказку placeholder :

Пример . Атрибут value одновременно с placeholder

А здесь давайте полю ввода установим одновременно подсказку placeholder и атрибут value . Если вы удалите содержимое атрибута value , то увидите подсказку, которая скрывается под ним:

Смотрите также

• атрибут value ,
  который задает значение по умолчанию для поля ввода