О кроссбраузерности placeholder

Автор: Евгений Рыжков Дата публикации:

Теория

placeholder — атрибут, который отображает текст-подсказку в поле формы и который пропадает автоматически при получении поле фокуса. Для браузеров, поддерживающие этот атрибут, отпадает необходимость использования Javascript-решений для очистки поля. Но разработчики столкнулись с некоторыми проблемами при использовании placeholder.

Проблема №1 — оформление placeholder

По умолчанию браузеры отображают текст подсказки серым цветом и шрифт (имя, размер, стиль) соответствует заданным для самого поля. Но допустим нам нужно оформить текст подсказки как-то не обычно, например, сделать его курсивом и красным цветом. Для этого используем следующий код:

::-webkit-input-placeholder { /* для webkit браузеров */
	color: red;
	font-style: italic;
}
:-moz-placeholder { /* для браузеров mozilla */
	color: red;
	font-style: italic;
}
input[type=number] {
	text-align: left; /* в Opera для полей number по умолчанию выравнивание вправо */
}

Демо пример. Чтобы placeholder появился в браузерах, которые нативно его не поддерживают (например, IE6-9, Firefox версий ниже 3.7), можно воспользоваться плагином jQuery-Placeholder.

Что не поддается

задать свои стили подсказкам в Opera 11 (как это обойти я пока не нашел);
сделать отступы подсказкам: отступы от границ полей для placeholder такие же как и для value. Можно пробовать это обойти правилами вроде:
```
::-webkit-input-placeholder {
	margin-left: 20px;
	display: block;
}
```
Но ни этот, ни любой другой вариант позиционирования у меня кроссбраузерно не заработал. Да и вообще это позиционирование мало кому нужно :).
оформить подсказку картинкой:
```
::-webkit-input-placeholder {
	background: url(back.jpg);
	display: block;
}
```
Такой фокус работает только в некоторых браузерах.

Проблема № 2 — не отображается placeholder

Даже те браузеры, которые поддерживают подсказки в полях, не для всех типов полей их выводят. Таблица отображения placeholder в зависимости от типа поля и браузера:

	Firefox 4.0	Opera 11	Chrome 11	Safari 5
input type=text	+	+	+	+
input type=password	+	+	+	+
input type=tel	+	+	+	+
input type=email	+	+	+	+
input type=number	+	+	-	+
input type=url	+	+	+	+
input type=search	+	+	+	+
input type=date	+	-	-	+
input type=color	+	-	-	+
textarea	+	-	+	+

Для одних полей объяснимо почему нет placeholder (вроде color). Для других спорно (date). Для третьих вообще непонятно почему нет (textarea, number). Бороться с этим придется пока то ли старыми методами, то ли как-то еще. Решать думаю стоит в каждом конкретном случае. Так же я пока особо не радовался на счет отображения везде подсказок в Firefox и Safari: они просто еще не поддерживают многие типы полей.

Выводы

Во-первых, текстовые подсказки в полях следует использовать только там, где они уместны: где есть острая необходимость экономии места.

Во-вторых, дизайнеру хоть иногда следует консультироваться с frond-end девелопером, о возможности реализации той или иной фичи.

В-третих, если уже приходится работать с такой формой, остается или делать костыли для некоторых браузеров, чтобы не потерять новых возможностей форм, или отказываться от новых типов, а значит и удобства для некоторых пользователей в пользу "эстетической красоты".

Xiper