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 # Алекс (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

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

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