jQuery script to clear input fields

Question

I've been trying to write a jQuery script where when someone clicks on the input the space clears and then if they don't type anything in, it reappears.

This is what I came up with. Is there a better way to do this? If so why is it better?

$(document).ready(function() {
            // set all input.text default value according to alt attribute
            $("input.contactStyle").each(function(){
                $(this).val($(this).attr("alt"));
            });

            // clear input.text on focus, if still in default
            $("input.contactStyle").focus(function() {

                if($(this).val()==$(this).attr("alt")) {
                    $(this).val("");
                }
            });

            // if field is empty afterward, add text again
            $("input.contactStyle").blur(function() {
                if($(this).val()=="") {
                    $(this).val($(this).attr("alt"));
                }
            });

            // set all input.text default value according to alt attribute
            $("textarea.contactStyle").each(function(){
                $(this).val($(this).attr("title"));
            });

            // clear input.text on focus, if still in default
            $("textarea.contactStyle").focus(function() {

                if($(this).val()==$(this).attr("title")) {
                    $(this).val("");
                }
            });

            // if field is empty afterward, add text again
            $("textarea.contactStyle").blur(function() {
                if($(this).val()=="") {
                    $(this).val($(this).attr("title"));
                }
            });
});

Answer 1

It seems like you're trying to recreate the functionality of the placeholder attribute that exists in HTML5. For browsers that support it--and that's all modern browsers with the exception of IE9 (I think)--your above code can be replaced with e.g.:

<input type="text" class="contactStyle" placeholder="Your placeholder text">

If you want to also use this functionality in less-modern browsers it'll take some JavaScript, but best not to reinvent the wheel. Several polyfills have been written by other people that let you use the placeholder attribute regardless of browser. There are several listed on this page (do a Ctrl+F for "placeholder").

Answer 2

You can simply achieve your goal by using this simple plugin jQuery clearfield. This plugin is very simple and easy to use

Answer 3

Two additional comments to @Jordan's great answer:

For custom attributes you should be using the data- suffix as suggested by the HTML5 spec: data-alt.
Here is a good short read on this: http://ejohn.org/blog/html-5-data-attributes/

If you decide to go the extra mile and apply progressive enhancement to non-conformant browsers, here is a good and very related answer on SO:
https://stackoverflow.com/questions/7557801/can-i-use-jquery-to-blank-textarea-fields-or-ajax-like-input-boxes/7557994#7557994