Fade out text value inside of text field using jQuery

Question

I am not entirely sure if this is possible or not, I am pretty knowledgeable when it comes to jQuery and JavaScript in general, but this one has me stumped. I\'ve created a

Answer 1

Just a quick thought, have you tried using the animation method to change the color of the text in the text box to match the background? Then when the animation completes you can clear the contents.

Its a thought. Its been a while since I've used the animation stuff, but I could probably whip up a code sample if you are interested.

Answer 2

I just ran into this problem, my solution is quite simple, just change the attribute "value" to ' '. This essentially will replace the text with nothing.

$(selector).attr('value', '');

Answer 3

here's what I use for exactly this. first add this to your JavaScript includes: http://plugins.jquery.com/project/color

then do this:

$('.search-input').focus(function(){
    if($(this).val() == 'Default Text'){
        $(this).animate({
            color: '#fff'
            //your input background color.
        }, 500, 'linear', function(){
            $(this).val('').css('color','#000'); 
            //this is done so that when you start typing, you see the text again :P
        });
    }
}).blur(function(){
    if($(this).val() == ''){
        $(this).val('Default Text').css('color','#fff');
        $(this).animate({
            color: '#000'
        }, 500, 'linear');
    }
});

what this will do is fade the text to the background color and then empty the input field. and on blur show the default text first, then fade it back to it's original color.

an illusion :)

you can remove a lot of this if you don't wish to actually clear the field. but you get the idea. the key here are two things. use the color plugin and .animate() effect.