Drupal. Плавное исчезновение текста при наведении на поле ввода. (placeholder)

  • Posted on: 18 November 2013
  • By: stillfinder

Допустим у нас есть форма созданная с помощью модуля webform и мы хотим, чтобы название поля выводилось внутри самого поля, а при наведении мышки на это поле название исчезало. Для этого добавляем в наш css следующий код:

CSS:

.webform-component label {
position:absolute;
color: grey;
margin-top: 4px;
margin-left: 4px;
}

А в javascript файл темы такой кучек кода:

JavaScript:

$(document).ready(function(){
  //alert(1);
  $('.webform-client-form label').each(function(i){
    var label=this;
    var input=$("#"+($(this).attr('for')).toString());
    $(input).blur(function(){
      $(input).removeClass("focus");
      if($(input).attr("value")==""){
        $(label).stop();
        $(label).animate({"opacity":1},500);
      }
    });
    $(input).focus(function() {
      $(input).addClass("focus")
    });
    if ($(input).attr("value")!=""){
      $(label).css("opacity",0);
 
    }
    $(input).bind('mouseover', function (){
      $(label).stop();
      $(label).animate({"opacity":0},500);
      $('.webform-client-form label').css("cursor","text");
    });
    $(input).bind("mouseout", function (){
      if (!$(input).hasClass("focus")){
        if($(input).attr("value")==""){
          $(label).stop();
          $(label).animate({"opacity":1},500);
        }
      }
    });
    $(input).bind('keyup', function (){
 
      if($(input).attr("value")==""){
        $(label).stop();
        $(label).animate({"opacity":0},500);
      }
      else {
        $(label).stop();
        $(label).animate({"opacity":0},500);
      }
    });
  });
});

Для использования не с webforms нужно только заменить в коде js следующие классы: webform-client-form, а в css webform-component на свои.

Tags: 
Drupal