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.

Answer 3

My suggestion is that you only remove the initial default content on the first focus. On subsequent focuses, you risk removing user content. To achieve this, simply .unbind() the focus handler after the first click:

$("textarea").focus(function(event) {

      // Erase text from inside textarea
    $(this).text("");

      // Disable text erase
    $(this).unbind(event);
});

jsFiddle example

---

As a note, since you are using a textarea which has open and closing tags, you can can use $(this).text(""); or $(this).html(""); ... and, since the text inside a textarea is its value you can also use $(this).val(""); and $(this).attr("value", ""); or even this.value = ""; .

Answer 4

HTML5 offers a more elegant solution to this problem: the "placeholder" attribute.

It'll create a text in background of your textarea which will appear only when the textarea is empty.

<textarea placeholder="Enter some text !"></textarea>

Answer 5

There are a couple of issues here that are only partially addressed in the current answers:

1. You need to clear the text when the user focuses the field
2. You only want to clear it the first time the user clicks on the field
3. You do not want the user to be able to submit the default text before it's been cleared
4. You might want to allow the user to submit the default text if they decide to type it back in. I have no idea why they'd want to do this, but if they insist on typing it back in, then I lean toward letting them do it.

With these details in mind, I'd add a class named "placeholder" to the field and use something like the following:

$("form textarea.placeholder").focus(function(e) {
    $(this).text("");
    $(this).removeClass("placeholder");
    $(this).unbind(e);
});

Validate that the "placeholder" class name was removed when the form is submitted to guarantee that the user really , really wants to submit some stupid placeholder text.

If you're using the jQuery Validation Plugin , then you can put it all together like this:

$.validator.addMethod("isCustom", function(value, element) {
    return !$(element).hasClass("placeholder");
});

$(form).validate({
    rules: {
        message: {
            required: true,
            isCustom: true
        }
    },
    messages: {
        message: "Message required, fool!"
    },
    submitHandler: function(form) {
        $(form).find(":submit").attr("disabled", "disabled");   
        form.submit();
    }
});

Answer 6

jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});

Answer 7

Something like this?

$('textarea#myTextarea').focus(function() {
   if ($(this).val() == 'default text') {
      $(this).val('');
   }
});

Answer 8

<textarea type="text" onblur="if ($(this).attr('value') == '') {$(this).val('The Default Text');}"  onfocus="if ($(this).attr('value') == 'The Default Text') {$(this).val('');}">The Default Text</textarea>

Answer 9

This is possible and i think you are going for a code that can do this for more textareas than one...
This is what i use for my site:
Javascript:

<script type='text/javascript'>
function RemoveText(NameEle)
{
    if ($('#' + NameEle) == 'default')
    {
        $('#' + NameEle).val('');
        $('#' + NameEle).text('');
        $('#' + NameEle).html('');
    }
}
function AddText(NameEle)
{
    if ($('#' + NameEle) == '')
    {
        $('#' + NameEle).val('default');
        $('#' + NameEle).text('default');
        $('#' + NameEle).html('default');
    }
}
</script>

HTML:

<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>

Answer 10

I found that simply

$('#myForm textarea').val(''); 

clears the form in Chrome but this did not work for Firefox (6.x). The value was empty in Firebug but the previous text still showed in the textarea. To get around this I select and rebuild the textareas one at a time:

$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);   
});

This finishes the job in Firefox and does not break Chrome. It will go through all of the textareas in a form one by one. Works in all other browsers (Opera, Safari, even IE).