Xiper

О кроссбраузерности 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 девелопером, о возможности реализации той или иной фичи.

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