Change textarea content on click using jquery

Question

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

Here is the code:

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

`placeHolder` attribute is best and easy way to do this. – SachinGutte Mar 18 '13 at 14:41 — SachinGutte, Mar 18 '13 at 14:41

score 4 · Accepted Answer · edited May 23 '17 at 12:21

4

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

edited May 23 '17 at 12:21

Community

1
1

answered Mar 18 '13 at 14:39

jorgehmv

3,633
3
25
39

1

Good suggestion, but 'placeholder' isn't supported in IE 9 and earlier versions. If browser compatibility isn't an issue for you, this is perfect, otherwise use @adamb answer. – Alex Mar 18 '13 at 14:43

score 1 · Answer 2 · answered Mar 18 '13 at 14:39

1

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.

answered Mar 18 '13 at 14:39

dsgriffin

66,495
17
137
137

score 0 · Answer 3 · answered Mar 18 '13 at 14:39

0

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

answered Mar 18 '13 at 14:39

adamb

4,815
1
25
40

score 0 · Answer 4 · answered Mar 18 '13 at 14:40

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

score 0 · Answer 5 · answered Mar 18 '13 at 14:42

0

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

This should work!

answered Mar 18 '13 at 14:42

Roland Theisen

1
1

score 0 · Answer 6 · answered Mar 18 '13 at 14:43

0

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

});

answered Mar 18 '13 at 14:43

Suresh Atta

120,458
37
198
307

Change textarea content on click using jquery

6 Answers6