jQuery placeholder

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

Для начала демонстрирующий пример, кликните мышкой по полям ввода данных:

Посмотреть пример в отдельном окне »

Принцип работы

Пользователь видит форму с полями, например форму поиска, сайт источник http://yapro.ru Thu Feb 17 2011 15:59:05 GMT+0300в ней написано «Поиск» или «Найти...» он кликает и эта надпись исчезает, тем самым давая пользователю ввести свои данные.

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

Например Вы сделали для пользователя форму заполнения и решили что полям ввода placeholder_yes и placeholder_yes_2 нужны подсказки. Эти подсказки можно указать значениями в атрибутах placeholder, например так:

<form action="" method="post">
    <input name="placeholder_yes" placeholder="Enter the text">
    <input name="placeholder_no">
    <textarea name="placeholder_yes_2" placeholder="Введите сообщение" style="width:150px; height:35px;"></textarea>
    <input type="submit">
</form>

В браузерах поддерживающих placeholder, подсказки будут работать даже сайт источник http://yapro.ru Thu Feb 17 2011 15:59:13 GMT+0300если отключен JavaScript, а остальным браузерам мы добавим такую возможность самостоятельно.

Подключение

Вставьте перед тегом </head> код:

<script type="text/javascript" src="placeholder.js"></script>

Использование

Включить плэйсхолдеры для всех форм на странице можно так:

$("FORM").placeholderLebnik();

для определенной формы с id="myForm" так:

$("#myForm").placeholderLebnik();

а для группы форм с class="myForm" так:

$(".myForm").placeholderLebnik();

Включение производите перед тегом </body> или через $(document).ready(); например так:

$(document).ready(function(){

    $("FORM").placeholderLebnik();

});

CSS стили

Цвет подсветки можно задавать с помощью класса placeholder, например так:

.placeholder {
    color:#CCCCCC;
}

Скачать placeholder »

Надеюсь это облегчит Вам разработку правильных форм, а пользователям ввод данных, всем удачи!