How do I grey out the default text of a text box?

Hey there,

I have a text box that shows some default text. On mouseover, the text would disappear and the user would be able to type in there regularly:
http://snpr.cm/bnGelO.jpg

However, I'd like to apply some CSS styling to the default text so that it looks like instructional text and nothing else. Do you have any ideas on how to accomplish this?

1) Default text would be grey colored
2) Onmouseover the text would disappear, and when the user starts typing it would be just regular black.

Here's the current code for this:

<textarea class="textarea" onblur="if(this.value=='') this.value='Question or topic you need help with (in one sentence)...';" onfocus="if(this.value=='Question or topic you need help with (in one sentence)...') this.value='';" id="question" name="question">Question or topic you need help with (in one sentence)...</textarea>

HTML:

Thanks!
Donny

 

You are looking for something called a placeholder. You could try the HTML5 placeholder attribute, or stick with Javascript (which will work in more browsers).

To make it look greyed out, you could also set the textarea to "disabled" until the user mouses over it (you set this in Javascript, so users without Javascript can type in there and simply don't get a placeholder). Or, you could use CSS styling to grey it by default and then change colours on :focus... but still would need Javascript there as well, to keep it looking "typable" once the placeholder is gone and the answer is in place.

Don't let placeholders take place of real labels! If you only want the placeholder, then have a label and let Javascript hide the label when it loads. People without JS get a regular text area and a label. People with Javascript only get the placeholder. Graceful degradation.

I've used something like this:

example HTML
...
    <input type="text" name="search" title="search our site" value="" aria-required="true">
    <input type="submit" value="Search"> 

Code (markup):

then

<script type="text/javascript">
    var searchLabel = document.forms['formSearch']['search'];
    searchLabel.value = 'type your keywords in'; //so onLoad, the value is added with Javascript
//here we could also make it disabled...
    searchLabel.disabled='true'; //actually I haven't tested this, not sure if setting to true works right
    searchLabel.onfocus = function() {
        searchLabel.disabled='false'; //or whatever works
        searchLabel.select(); //highlights on focus, which is nice because you don't have to worry much about onblur
        //or this.value=''; removes value on focus
    }
</script>

Code (markup):

you could add an onblur in there too...

    searchLabel.onblur = function() {
        if(searchLabel.value='') {
            searchLabel.value='type your keywords in';
            //also set back to disabled...
        }
    }

Code (markup):

*edit actually it's occurred to me that disabled inputs may not be able to receive focus in all browsers. If they can, then fine but if the next Tab skips it, you'll need to use CSS styling. In which case, I'd have classes pre-written in your CSS and just have Javascript add or remove the classes to add or remove styling. Easiest.

 

use jquery for all your desired activity, as Stomme poes shows you a example.

 

Don't let placeholders take place of real labels! If you only want the placeholder, then have a label and let Javascript hide the label when it loads. People without JS get a regular text area and a label. People with Javascript only get the placeholder. Graceful degradation.

 

<textarea onfocus="if(this.value == '[COLOR=#ff0000]default text[/COLOR]') { this.value = ''; }" onblur="if(this.value == '') { this.value = '[COLOR=#ff0000]default text[/COLOR]'; }">[COLOR=#ff0000]default text[/COLOR]</textarea>

Code (markup):

place your default text instead of "default text"