Default text on textarea jQuery?

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?

Solution 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/

Solution 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

Solution 3

"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

Comments

[PHPLOVER]

Hi, because my textareas already use a class i cannot add another class to the textareas plus it uses an id to. How could that code be changed so it does not depend on a class or id? thanks for the help and code.

[PHPLOVER]

Thanks will test in the morning as im shattered. Thank you Jacob :)

[Alexis Wilke]

One other problem here, when I click on the Submit button, the blur() detects no change and the textarea is set to the default string. I think that when you submit, you should restore the empty string instead. Although of course the server can test for the default string. But that defies the use of the edited flag...

[user2954658]

its actually the most noob friendly bit of code I have ever seen