jQuery script to clear input fields 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"));
                }
            });
});
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.:

&lt;input type="text" class="contactStyle" placeholder="Your placeholder text"&gt;


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").