en / ru

Placeholder для текстового поля

Атрибут placeholder для <input type="text" /> уже давно стал нормой. Но поддержка его всё еще достаточно хромая.
Проблема даже не в том, отображает ли браузер текст-заглушку, проблема больше с ограниченной стилизацией этого текста.

Ещё до появления более-менее приличной поддержки placeholder-ов в браузерах, я стал использовать свой js-имитатор, используя более привычный и логичный тэг - <label>
В большинстве случаев placeholder используется когда не хватает места для размещения подписей рядом с полями. Но ведь в такой ситуации текст этот является именно <label>. К тому же, остается возможность использования той же структуры кода для разных ситуаций (либо как placeholder, либо как подпись рядом с полем), просто управляя стилями.

See the Pen Placeholder imitation with label by Vitaki K (@Nargus) on CodePen.

Если структура html более сложная, то можно просто проверить "родителя" и задать особые правила для выборки label:

if($theTxt.parents('.custom-inp').length){
	$theLabel = $theTxt.parents('.search-inp').siblings('label');
};

Особенности CSS стилей:

  • label должен быть diplay:none;, чтобы скрипт сам мог регулировать его видимость
  • если текст может быть слишком длинным, для label стоит прописать white-space:nowrap; с фиксированной шириной и overflow:hidden; Причем ширину лучше задать равную максимальной ширине видимого текста в инпуте.
  • пишите стили без добавления скрипта, чтобы вы могли "наложить" текст с label на текст в input. Таким образом, при использовании поля ввода, не будет "прыгать" курсор, когда убирается текст placeholder

Альтернативный вариант

Учитывая то, что современные браузеры хорошо справляются с атрибутом placeholder, практически единственным, требующим альтернативы, является IE9 (и меньше).
Следующий скрипт позполяет автоматически создавать вспомогательный <label> при наличии атрибута, но невозможности его отобразить из-за несовершенства браузера:

See the Pen Placeholder for <=IE9 by Vitaki K (@Nargus) on CodePen.