CODEWITHSUNDEEP
jqueryhtmlcss
Hued Bafuli
Hued Bafuli

Reputation: 107

Change textarea content on click using jquery

How I can change my textarea content on click to be empty?

Here is the code:

http://jsfiddle.net/QMfyP/

<textarea name="adventage" style="width:400px; border-radius: 3px; border-left: 4px solid #6C3" id="adventage" cols="45" rows="5">Share with everyone what are the advantages of this vehicle. </textarea>

The idea is on click to this area, it will be empty for typing new text.

Upvotes: 0

Views: 257

Answers (6)

jorgehmv
jorgehmv

Reputation: 3713

You can get that functionality using the placeholder attribute

<textarea placeholder='Share with everyone what are the advantages of this vehicle.'></textarea>

It is the standard and easiest way (no javascript involved, you can see it working in stackoverflow's search textbox in the top of this page!).

It will not work in old browsers though (IE9 and older), if you need it to work in those browsers you can check this question

Upvotes: 4

Suresh Atta
Suresh Atta

Reputation: 121998

try like this.

For the first time place holder works.But if you have sometext already inside that (in case of editing) do some scripting.

$(document).ready(function(){
        $('#adventage').click(function(){
            $(this).val('');
        })

});

Upvotes: 0

Roland Theisen
Roland Theisen

Reputation: 1

$(document).ready(function(){
    $("textarea[name='adventage']").click(function({
        $(this).innerHTML("");
    }))
})

This should work!

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

http://jsfiddle.net/QMfyP/6/

HTML

<textarea class="my_textarea" name="adventage" id="adventage" cols="45" rows="5">Share with everyone what are the advantages of this vehicle. </textarea>

JQUERY

$("#adventage").click(function() {
  $(this).empty();
});

CSS

#adventage { width:400px; border-radius: 3px; border-left: 4px solid #6C3; }

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68596

Give the textarea a unique id (as you probably won't want to apply this to all textareas), e.g. thetextarea:

$("#thetextarea").click(function(){
   $("#thetextarea").empty();
});

Here's a working jsFiddle.

Upvotes: 1

adamb
adamb

Reputation: 4883

$('YOURSELECTOR').click(function(e) {
    $('#adventage').empty();
});

Upvotes: 0

Related Questions