Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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"));
                }
            });
});
share|improve this question

migrated from stackoverflow.com Dec 8 '11 at 5:54

This question came from our site for professional and enthusiast programmers.

3 Answers 3

up vote 6 down vote accepted

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

share|improve this answer
    
Wow I did not know about the placeholder tag. That makes life a lot easier lol. Thanks! –  Jacinto Dec 8 '11 at 20:40

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

share|improve this answer
    
It looks that the last letters are missing :-) –  palacsint Dec 8 '11 at 11:57

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:
http://stackoverflow.com/questions/7557801/can-i-use-jquery-to-blank-textarea-fields-or-ajax-like-input-boxes/7557994#7557994

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.