КодSEOБлогИное

placeholder, ::placeholder и :placeholder-shown

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Исчезающая подсказка в <input> и <textarea> HTML

Внутри пустого поля ввода <input> или <textarea> показывается надпись приглушенного цвета из атрибута placeholder, которая пропадает при вводе первого символа. Она может быть образцом значения или кратким описанием ожидаемого формата. [whatwg.org]

<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

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

Плохо
Хорошо

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

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

<style>
.raz::placeholder {
  color: red;
  opacity: 1; /* сделать обычным неполупрозрачным цветом в Firefox */ 
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

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

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

<style>
[placeholder] {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input>
<textarea></textarea>
<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

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

<style>
.raz:placeholder-shown {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Подсказка пропадает при получении фокуса <input type="text | password | другие"> и <textarea></textarea>

<style>
.raz:focus::placeholder {
  opacity: 0;
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

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

<style>
.raz:placeholder-shown {
  text-overflow: ellipsis;
}
</style>

<input placeholder="Обязательно заполняется при наличии" class="raz">
<style>
.raz:placeholder-shown {
  text-overflow: "\01F4E7"; /* свойством text-overflow может быть любой символ, в том числе emoji */ 
}
</style>

<input type="email" class="raz6" placeholder="name@site.ru                        ">

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

Сделать смещающиеся или всплывающие <label> в <form>

<style>
.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 {
  bottom: 100%;
  opacity: 1;
  font-size: 80%;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="&nbsp;"><span>Email</span></label>

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 50%;
  left: 2px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="Email"><span>Email</span></label>

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

Плохо

Эффект placeholder для <div>

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

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
</style>

<div contentEditable placeholder="Можно ввести текст" class="raz"></div>
<style>
.raz {
  height: 3em;
  border: 1px solid;
}
.raz:empty:not(:focus)::before { /* хак: если div задать и placeholder, то и .raz:empty:not(:placeholder-shown)::before будет работать */ 
  content: attr(data-placeholder);
  opacity: .5;
}
</style>

<div contentEditable data-placeholder="Можно ввести текст" class="raz"></div>

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

<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Email"
 title="Email"
/>
CoMiGo GamesСтоит добавить тот факт, что placeholder в Мозилле и Хроме серьёзно отличаются — у Мозилки он с 50% прозрачностью, а в Хроме непрозрачный. Поэтому в Хроме они особо хреново распознаются как заглушка пустого поля. Поэтому я везде дополнительно пихаю такой вот код:
::-moz-placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder {
  color: inherit;
  opacity: 0.5;
}
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. Надо во всём этом разбираться, да, но когда разберёшься и наделаешь себе шаблонов проектов — всё идёт на поток и на конфигурацию этих радостей современного интернета не обращаешь внимание :) В общем, теперь, если будет свободное время, ты знаешь, на что его ещё можно потратить :D 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 {
  visibility: visible;
}
Все комментарии