Comment box textarea showing default text that goes away when the user focuses it

Hey guys, I'm creating a co开发者_开发百科mment box and I want to do two stuff to the comment box which I think need javascript, but I'm not really a pro using javascript yet. I want the comment box to show some text in it saying (type in your comment) and when the user clicks it, the text disappears. And also, I want to show a submit button only when the user clicks on the comment box, do you know any way I can do that?

I have put up a page showing how to do this with plain JavaScript. I've abstracted the code for having text inputs/areas show instructional text until focused.

In general:

• watch the focus and blur events on the input and change the value (and optionally classes) based on the existing value/'helpful' value.
• watch the focus and blur of the comment box and change the CSS class of another element to show and hide it.

This is all a good bit easier if you use something like jQuery, since it already includes cross-browser code and even plugins to handle the self-describing part. If you're open to using jQuery, let me know and I'll give you an updated answer using that.

Edit: OK, I've added a jQuery version of the example. I decided not to use a plugin for the self-description since it is only 8 lines. I also changed that particular example to use the title attribute to hold the default text to display.

Edit #2: Based on the problem @Meke pointed out, I've made a minor update to the scripts to handle the case where FireFox reloads the page and leaves the default text in place, and then (previously) didn't properly add the class to indicate that this was default text.

I should also note that neither of my examples include a submit event handler for the form to remove the value for inputs that happen to still be showing the default value. This (rather trivial code) is something you would want to add.

Also note that by actually changing the value of the input/textarea code like this may break form validation not prepared to understand it.

As Phrogz jQuery version doesn't play well with reloads I decided to make my own based on what I knew, as such, here it is:

All you need to do is place a "placeholder=[text]" in your input to get it to show up (This name was picked as HTML5 uses "placeholder" for the very same function.

    $('input:text').each(function(){
            $(this).val($(this).attr('placeholder')).css('color','#900');
            $(this).focus(function(){
                // If value is same as 'placeholder', clear field
                if($(this).val() === $(this).attr('placeholder')){
                    $(this).val('').css('color','#000');
                } else { // Else select the whole text (one less click)
                    $(this).select();
                }
            });
            $(this).blur(function(){
                // On blur, if empty field, put placeholder back
                if ($(this).val() === ''){
                    $(this).val($(this).attr('placeholder')).css('color','#900');
                }
            });
        });