Добро пожаловать на наш сайт GAMECONTROL.AT.UA ,здесь Вы можете скачать всё для COUNTER STRIKE И СИСТЕМЫ UCOZ!
Связь с администратором 7

игровой портал Gamecontrol.at.ua - Всё для сервера Counter Strike 1.6 и Системы UCoz

Реклама - это основной доход Gamecontrol.at.ua. Пожалуйста, внесите наш сайт в список исключений, чтобы мы могли развивать наш проект и радовать Вас новыми материалами.

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

Добавил(а) HeaDShoT Просмотров: 7 Комментариев: 0
Одним очень удобным свойством 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="Ваше сообщение"/>


Надеюсь данная заметка с примером вам пригодиться, благодарю за внимание.

 

Скриншоты:



Рейтинг Оценка материалов
ПОЛНОЕ ИЛИ ЧАСТИЧНОЕ КОПИРОВАНИЕ МАТЕРИАЛА БЕЗ УКАЗАНИЯ ССЫЛКИ НА gamecontrol.at.ua ЗАПРЕЩЕНО!
ВНИМАНИЕ ! НИ В КОЕМ СЛУЧАЕ НЕ ПЕРЕХОДИТЕ ПО ССЫЛКАМ В КОММЕНТАРИЯХ ВО ИЗБЕЖАНИИ ВИРУСОВ !



 
Добавил(а) HeaDShoT Дата: 21.03.2021 Комментариев: 0 Теги: input, скрипты для ucoz, подсказки, Делаем, поле



 



 
Внимание! Если вам нравится это сайт, то пожалуйста отключите AdBlock или другие резальщики рекламы на этом сайте. Возможно предложение здесь, вас заинтересует.

Всего комментариев: 0
avatar
Добро пожаловать на наш сайт GAMECONTROL.AT.UA ,здесь Вы можете скачать ВСЁ ДЛЯ COUNTER STRIKE И СИСТЕМЫ UCOZ ,так же можно заказать в бегущюю строку вашу рекламу !