jqueryゴーストテキストの実装

Question

ゴーストテキストの場合はhttp://www.dinnermint.org/blog/share/jquery-ghost-text-plugin/でこの方法を使用します。

入力フィールドfont-sizeとcolor（CSSで）を12pxと＃666に設定しました。

入力を開始するとき、フォントの色を＃000 & font-sizeにすると13pxになります。つまり、ゴーストテキストの色が薄くなり、フォントが小さくなるはずです。 （私が上で提供したリンクの例のように）。

助けてください。

Answer 1

プラグインは、その中にこれを行います：

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

それはプレースホルダーテキストを使用する場合。

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

をそのようなフォントサイズを変更する奇妙な視覚効果を引き起こす可能性がありますが、明示的な高さを使用することによって、それらを避けることができるかもしれません：だから、あなたは自分のCSSでこのような何かを置くことができるはずです。おそらく色を変えて、フォントサイズをIMHOのままにしておく方が良いでしょう。

同じことを試すこともできますが、これはplaceholderの代わりにtitle属性を使用し、含まれるフォームが送信されるときにプレースホルダテキストもクリアします。

(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; 
} 

を、私もゴーストテキストを個人的にイタリックにしたい。 jQuery Ghost Text on programming.linnnk