phpjsJqueryhtmlcssblog

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

Подсказка в input , как сделать подсказки в поле ввода input!? Или может наоборот - удалить подсказки из input!?

Давайте разбираться! О каких подсказках идет речь и как с ними работать!?

Все о подсказках в input

1. Что такое подсказка в input
2. Как отключить подсказки в input!?

Скопировать ссылку



Что такое подсказка в input

С самого начала - вам нужно разобраться с : "Что такое подсказка в input". Самая простая "подсказка в input" - это атрибут html "".


Как поставить подсказку в input

Для того, чтобы вы увидели подсказку в поле input вам понадобится:

Для создания примера подсказки в input нами нужен тег input.

Внутрь тега помещаем атрибут , который и отвечает за подсказку внутри input

Помещаем в него произвольный текст.

пример подсказки в input.

Соберем код нашего input с подсказкой:

Код input с подсказкой

<input placeholder="пример подсказки в input">

Пример вывода input с подсказкой

Разместим прямо здесь полученный input с подсказкой:

Скопировать ссылку



Как отключить подсказки в input!?

Если у вас есть доступ к коду с тегами, то:

Вариант №1

Отключить подсказки в input.

Для отключения подсказки внутри тега input - просто удаляем атрибут html "" - как бы это банально не звучало.


Пример удаления подсказки в input

<input>

Результат удаления подсказки в input

Вариант №2

Как отключить подсказки в input через css!?

Для того, чтобы отключить подсказки через css вам потребуется:

Поле input возьмем из предыдущего пункта:

<input placeholder="пример подсказки в input">

Через css можно сделать подсказку невидимой.

Добавляем произвольный класс

hide_hint + стили для подсказки + color: transparent
<style>
.hide_hint::-webkit-input-placeholder {
color: transparent;
}
.hide_hint:-moz-placeholder { /* Firefox 18- */
color: transparent;
}
.hide_hint::-moz-placeholder { /* Firefox 19+ */
color: transparent;
}
.hide_hint:-ms-input-placeholder {
color: transparent;
}</style>


Соберем код input

Код отключенной подсказки через css

Css:

<style>

.hide_hint::-webkit-input-placeholder {

color: transparent;

}

.hide_hint:-moz-placeholder { /* Firefox 18- */

color: transparent;

}

.hide_hint::-moz-placeholder { /* Firefox 19+ */

color: transparent;

}

.hide_hint:-ms-input-placeholder {

color: transparent;

}</style>

Html:

<input placeholder="пример подсказки в input" class="width_100 hide_hint">

Пример отключения подсказки через css

Расположим выше приведенный код отключения подсказки в input прямо здесь:

Как видим... подсказка отлично отключилась(верене... её просто не видно!)

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---