treehouse : what would you like to learn today?
Web Design Web Development iOS Development

form value fade with JQuery

  • 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.

    <input type=\"text\" name=\"username\" value=\"Enter your username\"/>


    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.
  • This isn't jQuery, but it works.
    <input type=\"text\" value=\"Search\" onclick='this.value = \"\";' onblur=\"if (this.value == '') {this.value = 'Search';}\"  onfocus=\"if (this.value == 'Search') {this.value = '';}\" />
    <input type=\"submit\" value=\"Search\" />
  • Thanks for that. I'll give that a try but I'd really like a JQuery version.
  • HTML
    	<input type=\"text\" id=\"target\" />

    The jQuery
    $(document).ready(function(){ 

    $(\"#target\").val(\"Search\").focus(function() {

    if ($(this).val() == \"Search\") {
    $(this).val(\"\")
    }

    });
    $('#target').blur(function() {

    if ($(this).val() == '') {
    $(this).val(\"Search\");
    }

    });

    });