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

1032
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 2123
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
в страница добавления/редактирования материала отображается следуещее ,success:function(a){var a=$(a);!a.text().match('myWinError')? plusrep(a) : _uWnd.content('addEnt',a.text().match(/<div[^<>]*>(.+)<\/div>/i)[0])||$('input.manFlSbm').attr('disabled',0)}

и не работает ничего(, что делать?
  • modelswar3 написал:
  • Обновите ссылку!!
  • Marishka написал:
  • По просьбам поправили!.
    1. Делаем все как написано.
    2. Находим файл /Ucoz4/ctena_user2_wall_v2.js и меняем все в файле из нашего файла:
    Код
    http://mbs.usite.pro/ctena_user2_wall_v2.js
  • rayven написал:
  • в любом случае, всегда надо под свои нужды настраивать руками. А скрипт пригодиться, не тут, так там.
  • rayven написал:
  • даже Вовчик со мной согласен. tongue
    Последние темы
    Опрос
    291
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: