Question

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?

Answer 1

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/