I have a textarea that i would like to show some default text on page load. Once the textarea is clicked i would like to have the text disappear and possibly if user clicked in textarea and did not type anything in and then clicked out of textarea the default text will show again.

I have searched Google and on here but i can only seem to find tutorials relating to text boxes and NOT textareas, plus i already am using a class on the textarea so cannot depend on class for it to work.

Does anyone have some simple jQuery code they would like to share with me to do what i want above?

I have a textarea that i would like to show some default text on page load. Once the textarea is clicked i would like to have the text disappear and possibly if user clicked in textarea and did not type anything in and then clicked out of textarea the default text will show again.

I have searched Google and on here but i can only seem to find tutorials relating to text boxes and NOT textareas, plus i already am using a class on the textarea so cannot depend on class for it to work.

Does anyone have some simple jQuery code they would like to share with me to do what i want above?

• javascript
• jquery
• textarea
• default

• When you say that you "cannot depend on class," does that mean you can't add any classes to the textareas? – sdleihssirhc Commented Jan 23, 2011 at 1:46
• Yes because my textarea's are already using a class so cannot add another class to the textarea. – PHPLOVER Commented Jan 23, 2011 at 2:02
• 3 You can have as many classes as you want on a given html element. – Jacob Relkin Commented Jan 23, 2011 at 2:03
• When i do that i get a validation error: duplicate specification of attribute "class". Also my class styles the textarea and by adding another class it overides the class that styles the textarea so my textarea becomes a textarea with no styling. – PHPLOVER Commented Jan 23, 2011 at 2:09
• 1 You don't specify class= multiple times. Instead, you put a space-delimited list inside the attribute. For example, class="foo bar baz" will have three classes foo, bar, and baz. – Joe White Commented Jan 27, 2011 at 21:08

5 Answers 5

DEMO: http://jsfiddle.net/marcuswhybrow/eJP9C/2/

It is important to remember the edge case that the user types the value which is your default. My solution avoids this by giving each textarea an edited flag using jQuery's data() method.

The HTML

Define the default value of the textarea as you would normally:

<textarea>This is the default text</textarea>

The jQuery

$('textarea').each(function() {
    // Stores the default value for each textarea within each textarea
    $.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});

DEMO: http://jsfiddle.net/marcuswhybrow/eJP9C/2/

Simple enough:

$(function() {
  $('textarea.autoDefault').focus(function() {
     if($(this).val() === $(this).data('default') && !$(this).data('edited')) {
        $(this).val('');   
     }
  }).change(function() {
     $(this).data('edited', this.value.length > 0);
  }).blur(function() {
     if($(this).val().length === 0) {
        $(this).val($(this).data('default'));
     }
  }).blur(); //fire blur event initially
});

HTML markup:

<textarea class="autoDefault" rows="10" cols="25" data-default="some default text"></textarea>

jsFiddle example

"style='color:#888;' onfocus='inputFocus(this)' onblur='inputBlur(this)'"

^add that to your HTML element

function inputFocus(i){
    if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
    if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}

^add that to your document.ready function

I found that solution on SO a while ago and I haven't seen it done better

I have searched Google and on here but i can only seem to find tutorials relating to text boxes

Whatever is used on a text-box can also be used on a textarea in jQuery. The val() method detects the control used and will use value attribute for input and inner text for textarea

Pick up any of those links and implement it

Another way is to use HTML5's placeholder tag.

http://davidwalsh.name/html5-placeholder

This probably is not supported in all browsers especially old IEs.