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 simple plugin that clears a text input on focus and then displays the default value if nothing has been entered.

Is it possible to fade out just the text itself inside of the text input, and not the whole field itself? All attempts seem to result in the text field itself fading out and eventually hiding the element from view.

I did come up with a solution of using spans containing the default value and absolutely positioning them over the text input, hiding and showing them depending if a user has entered any text or not. I would much rather a much straightforward approach if one exists.

Edit

Using the jQuery animate function which is in jQuery UI or available as a plugin for jQuery, you can animate the text color to be the color of the input upon focusing and blurring of the field (as pointed out below). Here is the code that I am using in-case you wanted to know how.

    obj.bind("focus", function() {
  if ($(this).val() == oldValue) {
      $(this).animate({ color: '#E8DFCC' }, 1000).val('');
  }
 });

 obj.bind("blur", function() {
  if ($(this).val().length <= 3) {
      $(this).animate({ color: '#56361E' }, 600).val(oldValue);
  }
 });

Tracytrade

You already nailed the best cross-browser solution here, an element positioned on top, not sure that you can improve it while still working everywhere. – Hillari

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.

Hasen

Thank you very much for the suggestion. I should be right to write some animation code, I'm familiar with it enough although hardly use it to try it out. I'll report back how I go, but I reckon it will work. – Tracytrade

Simple, but elegant solution. jQuery doesn't support color animations out of the box, but if you have jQuery UI you can do color animations, otherwise there is a color animation plugin you can download as well. I've updated my question to reflect the code I used in-case someone else would like to know how to do it. – Tracytrade

Awesome, I didn't have a chance to test it out (wrangling children between my crack-overflow fixes), so I'm glad it worked (with jQuery UI). – Hasen

Answer 2

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.

Schalles

Answer 3

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', '');

Inpour

This just deletes the text in the field instead of smoothly fading it out. Note that $(selector).val(""); is even shorter. – Francoise

This sortof works: .fadeOut().val("new value").fadeIn() but the whole input field disappears which is ugly. – Picket

Answer 4

try this where "$('[name="topics-reviews-search"]')" is your input and $('.reviews-filter-reset') is your reset button:

$(document).on('click', '.reviews-filter-reset', function(){
   empty_filter_review();
});

function empty_filter_review(){
    $('[name="topics-reviews-search"]').css({
        'opacity' : '0',
        'transition' : 'opacity .35s linear 0s'
    });
    setTimeout(function(){
        $('[name="topics-reviews-search"]').val('');
        $('[name="topics-reviews-search"]').removeAttr('style');
        $('[name="topics-reviews-search"]').blur();
       
    },350);
}

Isochor