Placeholder jQuery — Замещающийся текст

При верстке форм очень часто приходится использовать замещающийся текст. Я думаю, что вы на многих сайтах это встречали, когда по умолчанию в поле ввода написан некий текст, но стоит кликнуть по данному полю, как текст автоматически исчезает и вы можете вводить туда, все что угодно.

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

Пишется он следующим образом:

<input type="text" placeholder="Логин" name="login" />

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

Об одном из таких плагинов у нас и пойдет речь в этой статье. И что у нас получиться на выходе, вы можете посмотреть, кликнув по кнопке «посмотреть демо».

Итак, поехали…

Шаг 1 - Создаем HTML-форму

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

<form action="#" method="post">
<div>
<input type="text" placeholder="Логин" name="login" />
</div>
<div>
<input type="password" placeholder="Пароль" name="password" />
</div>
<div>
<textarea placeholder="Введите текст" name="text"></textarea>
</div>
<div>
<input type="submit" value="Отправить" />
</div>
</form>

Шаг 2 - Подключаем плагин Placeholder jQuery

Далее нам необходимо подключить библиотеку jQuery и собственно сам плагин jQuery Placeholder (их вы можете скачать из дополнительных материалов, они лежат в папке js).

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>

Шаг 3 - Инициализируем плагин

Теперь, чтобы у нас все заработало, инициализируем подключенный ранее плагин:

$('input[placeholder], textarea[placeholder]').placeholder();

Если вы все сделали правильно, то теперь старые браузеры, также как и современные, начнут понимать атрибут placeholder.

Задание стилей для placeholder с помощью CSS

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

К примеру, для браузеров Chrome и Safari используется псевдокласс ::-webkit-input-placeholder, для Firefox 18 и более ранних версий - :-moz-placeholder, а для Firefox 19+ используется уже другой псевдокласс ::-moz-placeholder, ну и для IE10 - :-ms-input-placeholder.

Для старых браузеров, плагин автоматически задает замещающему тексту класс placeholder и тем самым, вы легко можете управлять его внешним видом.

То есть, CSS стили могут выглядеть так:

::-webkit-input-placeholder { /* Chrome и Safari */
	color: #d63c3c;
	font: 14px Arial, Tahoma, sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
	color: #d63c3c;
	font: 14px Arial, Tahoma, sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
	color: #d63c3c;
	font: 14px Arial, Tahoma, sans-serif;
}
:-ms-input-placeholder { /* IE10 */
	color: #d63c3c;
	font: 14px Arial, Tahoma, sans-serif;
}
.placeholder { /* IE7 - IE9 */
	color: #d63c3c;
	font: 14px Arial, Tahoma, sans-serif;
}

Заметьте, что правила для каждого из псевдоклассов задаются отдельно, т.к. группировать их нельзя.

И еще что хотелось отметить напоследок, так это проблема с браузером Opera 11, потому что в нем, мы не можем стилизовать placeholder, т.к. в данном браузере просто нет подходящего псевдокласса.

Добавить комментарий

  • 19.01.2016 14:46

    А как сделать слово "Введите" одним цветом, а слово ''текст " другим в placeholder? С помощью JavaScript? Есть ли у Вас такая реализация? Поделитесь, пожалуйста!

  • Спасибо, реально помогла Ваша статья (про отличия записи псевдоклассов версий FF).

  • Cпасибо за статью, только я не понял что значит инициализируем плагин? Куда этот код $('input[placeholder], textarea[placeholder]').placeholder(); нужно вписать?

    • Sviatoslav,

      Между тегами head, подключите библиотеку jQuery и сам плагин:
      <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
      <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>

      А после них (также между тегами head), пропишите следующий JS-код:
      <script type="text/javascript">
      $('input[placeholder], textarea[placeholder]').placeholder();
      </script>

      Тем самым, вы инициализируете, т.е. запустите работу плагина.

    • Александр Пауков, Спасибо!

  • Классный по дизайну сайт!