Как сделать чтобы placeholder не исчезал

Обновлено: 06.07.2024

Placeholder используется в качестве атрибута практически в каждой веб-форме, и не стоит забывать о нем ни одному дизайнеру или разработчику. Легче всего подать справочную информацию в виде короткой заметки непосредственно в полях сложной формы, или даже заменить таким образом метки (label). Другое дело, что неправильное использование текстового input placeholder-а вызывает много проблем с удобством использования.

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

Placeholder как метка

Разместите пояснение над полем ввода вместо того, чтобы использовать placeholder в качестве пояснения

Посему пояснение лучше разместить над полем ввода. Одно пустое поле ввода без информации после постановки курсора вводит пользователя в ступор – становится непонятно, что делать дальше, ибо подсказок нет.

Placeholder в качестве примера

Вынесите пример вводимого текста под поле ввода, а не используйте его как placeholder

Пример того, что необходимо ввести в поле форму, помогает пользователю понять, что от него хотят. Но если использовать шаблонный текст как placeholder, это создаст некоторые трудности при вводе – текст примера исчезнет из центра внимания, пользователь немного застопорится на вводе и забудет, что же требовалось указать. Поэтому в качестве альтернативы можно разместить вспомогательный текст под полем ввода.

Placeholder в качестве подсказки

Placeholder не стоит делать в качестве подсказки к полю

Часто placeholder используют для указания дополнительной информации о том, что нужно ввести в поле. Это тоже ошибочно – как по причинам, указанным выше, так и из-за количества текста в placeholder-е. Начинающие дизайнеры и разработчики часто ошибаются, используя placeholder как достаточно длинное текстовое предложение со справочной информацией. Благо дело, этому способу есть много альтернатив, три из которых указаны выше.

Placeholder как заголовок поля

Используйте label-ы как дополнительные заголовки полей, а не placeholder-ы

Сделать дополнительные заголовки в виде placeholder-ов – идея заманчивая, но лучше повысить простоту и удобство использования формы путем применения каких-то альтернатив вроде обычного label-а.

Обычно форма выглядит куда удобнее и красивее, если placeholder-ы не используются и/или заменены на указанные выше альтернативы. Но если они необходимы…

Правильное применение placeholder-ов

Placeholder-ы должны быть менее заметны, чем вводимый текст

Более светлый цвет делает текст placeholder-a менее отвлекающим и отличает его от уже введенного текста.

Как известно и понятно, пользователи заполняют пустые поля – это логично, ведь там где пусто, там нужно заполнить. Но в некоторых случаях placeholder ставить необязательно, так как он путает посетителя, и особенно – если он того же цвета, что и основной вводимый текст, ведь легко запутаться и подумать, что текст уже введен.

Placeholder должен быть виден на любом экране

Если цвет placeholder-а слишком светлый, он может быть незаметным на некоторых экранах.

Placeholder вызывает неудобства и в том случае, если его цвет слишком светлый, ибо в таком случае он плохо читается на некоторых экранах, и пользователю приходится напрягать зрение.

Placeholder не должен исчезать при постановке курсора в поле ввода

Оставляйте placeholder до того момента, пока пользователь не начнет печатать

Исчезновение placeholder-а дополнительно нагружает кратковременную память, потому как теряется фокус на необходимую информацию.

Как показывает практика, форма ввода более удобна без использования placeholder-ов.

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

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

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

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

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

задать свои стили подсказкам в Opera 11 (как это обойти я пока не нашел);
сделать отступы подсказкам: отступы от границ полей для placeholder такие же как и для value. Можно пробовать это обойти правилами вроде:

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

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

). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.

Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:

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

Стилизация

Для стилизации плэйсхолдеров используются следующие правила:

Выглядит ужасно, не так ли? И на это есть причина — до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse.

Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

Пример

Синий текст для плэйсхолдера (никогда так не делайте):

Поддерживаемые свойства

Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:

font и все связанные свойства ( font-size , font-family и т.д.)
background и все связанные свойства ( background-color , background-image и т.д.)
opacity
text-indent
text-overflow
color
text-transform
line-height
word-spacing
letter-spacing
text-decoration
vertical-align

Анимации

Идеи анимаций принадлежит блогу html5.by.

Все следующие примеры написаны с использованием препроцессора Sass. К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder :

Изменение прозрачности

Сдвиг вправо и влево

Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .

Сдвиг вниз

Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.

Всё вместе

Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом (посмотреть на SassMeister):

Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:

Autoprefixer

Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer. С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент ::placeholder :

После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.

Что дальше

Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс :placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

Псевдоэлемент ::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:

Разница между :placeholder-shown и ::placeholder

:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

Взгляните на диаграмму:

Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.

Элемент или класс?

В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

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

Цвет заглушки в Firefox

Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

Попробуйте открыть это демо в браузере Firefox .

Поддержка стилей

Псевдоэлемент поддерживает следующие свойства:

font properties ;
color ;
background properties ;
word-spacing ;
letter-spacing ;
text-decoration ;
vertical-align ;
text-transform ;
line-height ;
text-indent ;
opacity ;

Дополнительные ресурсы

Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse

Браузерная поддержка

Здесь имеется в виду как нативная поддержка CSS input placeholder color , так и поддержка, реализуемая с помощью префиксов.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
4+	5+	4+	15+	10+	Любой	Любой

Firefox поддерживает псевдоклассы до 18 версии. Версии 19+ поддерживают псевдоэлемент, но не класс.

Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!

Дайте знать, что вы думаете по этой теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, лайки, отклики!

Пожалуйста, оставьте ваши отзывы по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

placeholder - это атрибут в html5, который выводит текст внутри поля input, и этот текст исчезает, когда пользователь начинает там писать свой текст. Это нужно, например, в форме поиска, чтобы убрать текст подсказки внутри неё при клике по ней.

Первый способ (рекомендуется): через css

Второй способ: через jquery

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Читайте также: