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


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

926
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 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • sasha2016tv написал:
  • Хороший скрипт
    Ох. Вижу, что обсуждение очень старое. Но!
    На других CMS так же будет все это реализовано. На нормальных CMS.
    Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

    Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
    Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
    Последние темы
    Опрос
    433
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: