CODEWITHSUNDEEP
javascriptjquerytextarea
CLiown
CLiown

Reputation: 13853

How can I clear a textarea on focus?

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?

Upvotes: 35

Views: 71331

Answers (10)

GuyFromOverThere
GuyFromOverThere

Reputation: 471

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>

Upvotes: 0

Sebastien
Sebastien

Reputation: 712

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>

Upvotes: 9

Wayne
Wayne

Reputation: 60424

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();
    }
});

Upvotes: 7

kingjeffrey
kingjeffrey

Reputation: 15290

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.

Upvotes: 27

Chris Adams
Chris Adams

Reputation: 661

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).

Upvotes: 0

clickandboom
clickandboom

Reputation: 11

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

Upvotes: 0

redwall_hp
redwall_hp

Reputation: 1067

Something like this?

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

Upvotes: 0

Peter Ajtai
Peter Ajtai

Reputation: 57715

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

Upvotes: 12

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146640

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

Upvotes: 4

Jacob Relkin
Jacob Relkin

Reputation: 163318

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

Upvotes: 54

Related Questions