Как убрать placeholder при фокусе
О кроссбраузерности placeholder
Теория
placeholder — атрибут, который отображает текст-подсказку в поле формы и который пропадает автоматически при получении поле фокуса. Для браузеров, поддерживающие этот атрибут, отпадает необходимость использования Javascript-решений для очистки поля. Но разработчики столкнулись с некоторыми проблемами при использовании placeholder.
Проблема №1 — оформление placeholder
По умолчанию браузеры отображают текст подсказки серым цветом и шрифт (имя, размер, стиль) соответствует заданным для самого поля. Но допустим нам нужно оформить текст подсказки как-то не обычно, например, сделать его курсивом и красным цветом. Для этого используем следующий код:
Демо пример. Чтобы placeholder появился в браузерах, которые нативно его не поддерживают (например, IE6-9, Firefox версий ниже 3.7), можно воспользоваться плагином jQuery-Placeholder.
Что не поддается
Проблема № 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 девелопером, о возможности реализации той или иной фичи.
В-третих, если уже приходится работать с такой формой, остается или делать костыли для некоторых браузеров, чтобы не потерять новых возможностей форм, или отказываться от новых типов, а значит и удобства для некоторых пользователей в пользу «эстетической красоты».