jQuery placeholder

Автор: Aport Понедельник, Февраль 2nd, 2015 Нет комментариев

Рубрика: Уроки JavaScript

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 »

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты