How can I clear a textarea on focus?

Question

Im using a simple form with a textarea, when the users clicks onto the textarea I want the contents of the textarea to be cleared.

Is this possible?

Answer 1

$('textarea#someTextarea').focus(function() {    $(this).val(''); }); 

Answer 2

If you only want to delete the default text (if it exists), try this:

$("textarea").focus(function() {      if( $(this).val() == "Default Text" ) {         $(this).val("");     }  }); 

By testing for the default text, you will not clear user entered text if they return to the textarea.

If you want to reinsert the default text after they leave (if they do not input any text), do this:

$("textarea").blur(function() {      if( $(this).val() == "" ) {         $(this).val("Default Text");     }  }); 

Of course, the above examples assume you begin with the following markup:

<textarea>Default Text</textarea> 

If you want to use placeholder text semantically you can use the new HTML5 property:

<textarea placeholder="Default Text"></textarea> 

Although this will only be supported in capable browsers. But it has the added advantage of not submitting the placeholder text on form submission.