jquery ghost text implementation

Im using this method at http://www.dinnermint.org/blog/share/jquery-ghost-text-plugin/ for the ghost text.

I've set the input field font-size and color (in CSS) as 12px and #666.

When I start typing, I want the font color to be #000 & font-size to be 13px; meaning, the ghost text should have a faded color and smaller font. (Just like the example in the link I've provided 开发者_开发问答above).

Kindly help.

The plugin does this inside it:

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

when it uses the placeholder text. So, you should be able to just put something like this in your CSS:

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

Changing the font size like that might cause odd visual effects but you might be able to avoid those by using an explicit height. You're probably better off just changing the color and leaving the font size constant IMHO.

You can also try my take on the same thing, this uses the title attribute instead of placeholder and also clears the placeholder text when the containing form is submitted.

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

Here is an alternative/simpler (though less robust at the same time) example that would complete your same goal.

Here is the jQuery, it automatically applies itself to anything with the 'ghost-text' class applied to it and assumes the value on page load to be the 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');
            }
        });
    });
});

So, to change how you want the inputs to look you can just style the ghost-text class like so:

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

That would be a little smaller than your default size and gray, I also like to make my ghost text italic personally.

Here is my working ghost text example for the above code and also an article I wrote up with a little more information regarding my code: jQuery Ghost Text on programming.linnnk