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 »

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

Оцени публикацию:
  • 9,44
Оценили человек: 9
Теги : placeholder, плэйсхолдер, jQuery

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Спасибо
    17 февраля 2011, 15:31 коммент полезен : 0 # Max
    • пожалуйста, наверняка в каком-нибудь проекте пригодится
      17 февраля 2011, 18:39 коммент полезен : -1 # Admin
  • В Опере никаких подсказок не появляется...
    05 мая 2011, 12:24 коммент полезен : -1 # Sasharp
  • Тоже в своё время писал такой плагин, потом нашёл более продвинутый плэйсхолдер, учитывающий разные моменты. Возможно, пригодится:
    31 мая 2012, 04:35 коммент полезен : -1 # Dmitrienkop
  • Вот ссылка:
    http://www.xiper.net/examples/js-plugins/html5-and-css3/placeholder/js/jquery.placeholder.js
    31 мая 2012, 04:35 коммент полезен : -1 # Dmitrienkop (гость)
    • спасибо за альтернативный вариант, однако в нем тоже есть неприятные моменты, например:
      if ($.browser.msie
      я давно для себя выяснил, что jQuery не всегда правильно определяет браузер и его версию, поэтому такой подход не всегда будет срабатывать правильно.
      31 мая 2012, 06:13 коммент полезен : -1 # Admin
  • Попробуй на паролях. Я думаю гавно будет
    А вот это внатуре круто
    http://www.xiper.net/examples/js-plugins/html5-and-css3/placeholder/js/jquery.placeholder.js
    06 июня 2012, 14:19 коммент полезен : -1 # Саня (гость)
  • В Chrome 19 плэйсхолдер исчезает только после того как начинаешь вводить текст. Как это можно исправить?
    06 июня 2012, 15:24 коммент полезен : -2 # G
  • Лучше лабел сверху инпута показывать иначе инпут при передаче формы как бы содержит не верное значение (подсказку), а должен быть пустым.
    21 апреля 2013, 14:06 коммент полезен : -1 # Алекс (гость)
  • Спасибо большое! Возился с плэйсхолдерами для ИЕ8. Перепробовал несколько плагинов, найденных в интернете. Ваш заработал сразу же))
    24 ноября 2017, 07:04 коммент полезен : 0 # Александр29
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » JavaScript »