Делаем подсказки в поле input


Делаем подсказки в поле input

896
5.6 из 10
Проголосовало: 10






Одним очень удобным свойством HTML форм, а именно текстовых полей является поддержка атрибута Placeholder. Этот атрибут позволяет задать произвольный текст, который будет отображаться в поле и исчезать про фокусе на нем. Таким образом получается нечто своеобразной подсказки для пользователя о назначении данного поля. Но увы, не все браузеры поддерживают данный атрибут для полей, тегов INPUT и TEXTAREA, а лишь Chrome, Opera 11.5>, Safari 5>, FireFox 4>, IE всех версий вообще его не поддерживает(как всегда).

Пример HTML кода:

Код
<textarea placeholder="Ваше сообщение"></textarea>


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

Пример JS (с использованием библиотеки jQuery):

Код
$(document).bind('ready', function(event) {
  $('.placeholder').each(function(i) {
   
  var item = jQuery(this);
  var text = item.attr('rel');
  var form = item.parents('form:first');
   
  if (item.val() === '')
  {
  item.val(text);
  item.css('color', '#888');
  }
   
  item.bind('focus.placeholder', function(event) {
  if (item.val() === text)
  item.val('');
  item.css('color', '');
  });
   
  item.bind('blur.placeholder', function(event) {
  if (item.val() === '')
  {
  item.val(text);
  item.css('color', '#888');
  }
  });
   
  form.bind("submit.placeholder", function(event) {
  if (item.val() === text)
  item.val("");
  });
  });
  });


При этом HTML будет выглядеть след. образом:

Код
<input type="text" name="email" class="placeholder" rel="Ваше сообщение"/>


Надеюсь данная заметка с примером вам пригодиться, благодарю за внимание.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://jquery.com/
  • Всего комментариев: 2

Nexus
0
Nexus написал: Написано 02 Июня 2013 в 18:16
Комментарий №2
А так нельзя сделать:
? smile

Goodmind
+2
Goodmind написал: Написано 25 мая 2013 в 17:00
Комментарий №1
Злостные ненавистники IE, в IE10 атрибут placeholder между прочим работает! dry

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    402
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 2
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: