javascript - 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);
  }
 });

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.