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

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, т.к. в данном браузере просто нет подходящего псевдокласса.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (6)

Marina 19 января в 14:46

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

Ответить

Игорь 31 марта 2014 г. в 13:19

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

Ответить

Sviatoslav 5 февраля 2014 г. в 00:59

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

Ответить

Александр Пауков 5 февраля 2014 г. в 18:41

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>

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

Ответить

Sviatoslav 7 февраля 2014 г. в 02:12

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

Ответить

Сергей 11 января 2014 г. в 17:42

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

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

« Вернуться назад