How can I clear a textarea on focus? How can I clear a textarea on focus? jquery jquery

How can I clear a textarea on focus?


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


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.


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 = "";.