jquery ghost text implementation

Question

Я использую этот метод в http://www.dinnermint.org/blog/share/jquery-ghost-text-plugin/ для текста призрака.

Я установил размер шрифта и цвет ввода (в CSS) как 12px и # 666.

Когда я начну печатать, я хочу, чтобы цвет шрифта был # 000 & font-size размером 13px; смысл, текст призрака должен иметь выцветший цвет и меньший шрифт. (Как и в примере, приведенном выше).

Просьба помочь.

Answer 1

Плагин делает это внутри:

$(this).addClass("disabled"); 

, когда он использует шаблонный текст. Таким образом, вы должны быть в состоянии просто поставить что-то вроде этого в вашем CSS:

input { 
    font-size: 13px; 
    color: #000; 
} 
input.disabled { 
    font-size: 12px; 
    color: #666; 
} 

Изменение размера шрифта как это может вызвать странные визуальные эффекты, но вы можете быть в состоянии избежать тех, используя явную высоту. Вам, вероятно, лучше просто изменить цвет и оставить размер шрифта постоянным IMHO.

Вы также можете попробовать взять одно и то же, это использует атрибут title вместо placeholder, а также удаляет текст заполнителя при отправке содержащейся формы.

(function($) { 

    $.fn.egText = function(options) { 
     options = $.extend({ }, $.fn.egText.defaults, options || { }); 
     var $all = this; 
     $all.focus(function() { 
       var $this = $(this); 
       if(!$this.data(options.dataKey)) 
        $this.data(options.dataKey, 'yes').removeClass(options.egClass).val(''); 
      })   
      .blur(function() { 
       var $this = $(this); 
       if($this.val() == '') 
        $this.addClass(options.egClass).removeData(options.dataKey).val($this.attr('title')); 
       else    
        $this.data(options.dataKey, 'yes'); 
      })   
      .blur();  
     $.unique($all.closest('form')).submit(function() { 
      $all.each(function() { 
       var $this = $(this); 
       if(!$this.data(options.dataKey)) 
        $this.val('');  
      });   
      return true; 
     });  
    }; 

    $.fn.egText.defaults = { 
     dataKey: 'egText', // The key we use for storing our state with .data(), just in case there are conflicts... 
     egClass: 'lolite' // The CSS class to add to the <input> when we're displaying the example text. 
    }; 

})(jQuery); 

Answer 2

Ниже представлен альтернативный или более простой (хотя и менее надежный в то же время) пример, который завершит вашу задачу.

Здесь jQuery, он автоматически применяется к чему-либо с классом «ghost-text», применяемым к нему, и предполагает, что значение на странице загружается как текст-призрак.

$(document).ready(function(){ 
    $('.ghost-text').each(function(){ 
     var d = $(this).val(); 
     $(this).focus(function(){ 
      if ($(this).val() == d){ 
       $(this).val('').removeClass('ghost-text'); 
      } 
     }); 
     $(this).blur(function(){ 
      if ($(this).val() == ''){ 
       $(this).val(d).addClass('ghost-text'); 
      } 
     }); 
    }); 
}); 

Таким образом, чтобы изменить то, как вы хотите, чтобы входы смотреть вы можете просто стиль призрак текстового класса следующим образом:

.ghost-text{ 
    font-size:.9em; 
    color:#ccc; 
} 

Это будет немного меньше, чем размер по умолчанию и серый, Я также хотел бы сделать свой текст призрака курсивом лично.

Вот мой working ghost text example для приведенного выше кода, а также статьи, которую я написал с немного больше информации относительно моего кода: jQuery Ghost Text on programming.linnnk