Вернуться к уроку

Улучшенный плейсхолдер

важность: 5

Реализуйте более удобный плейсхолдер-подсказку на JavaScript через атрибут data-placeholder.

Правила работы плейсхолдера:

  • Элемент изначально содержит плейсхолдер. Специальный класс placeholder придает ему синий цвет.
  • При фокусировке плейсхолдер показывается уже над полем, становясь «подсказкой».
  • При снятии фокуса, подсказка убирается, если поле пустое – плейсхолдер возвращается в него.

Демо:

В этой задаче плейсхолдер должен работать на одном конкретном input. Подумайте, если input много, как здесь применить делегирование?

Открыть песочницу для задачи.

В данном случае достаточно событий input.focus/input.blur.

Если бы мы хотели реализовать это на уровне документа, то применили бы делегирование и события focusin/focusout (эмуляцию для firefox), так как обычные focus/blur не всплывают.

Открыть решение в песочнице.