2
\$\begingroup\$

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"));
                }
            });
});
\$\endgroup\$

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

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

7
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ Wow I did not know about the placeholder tag. That makes life a lot easier lol. Thanks! \$\endgroup\$ – Jacinto Dec 8 '11 at 20:40
1
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ It looks that the last letters are missing :-) \$\endgroup\$ – palacsint Dec 8 '11 at 11:57
1
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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