Grow your CSS skills. Land your dream job.

form value fade with JQuery

  • # May 21, 2010 at 11:20 am

    Hi all,

    I know I have seen this somewhere but I can’t for the life of me find it. I know Chris has done it on this site somewhere but I can’t remember what it was called to search for it.

    All I’m looking to do is to provide a helpful value in a form field.
    i.e.

    Code:

    As the user clicks in the form field the value fades out leaveing an empty field.

    At the moment I can get the value to clear but if I try to fade out I end up fading the input rather than the value.

    Any help would be great, thanks.

    # May 21, 2010 at 12:19 pm

    This isn’t jQuery, but it works.

    Code:

    # May 24, 2010 at 2:25 am

    Thanks for that. I’ll give that a try but I’d really like a JQuery version.

    # May 29, 2010 at 1:59 pm

    HTML

    Code:

    The jQuery

    Code:
    $(document).ready(function(){

    $(“#target”).val(“Search”).focus(function() {

    if ($(this).val() == “Search”) {
    $(this).val(“”)
    }

    });
    $(‘#target’).blur(function() {

    if ($(this).val() == ”) {
    $(this).val(“Search”);
    }

    });

    });

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".