How to clear textarea on click?

Question

Given a <textarea> with a default value as follows:

<textarea>Please describe why</textarea>

How do you clear the default value when the user clicks to edit the field?

Ariannaarianne

Please use real <label>s and don't abuse the default value to act as a fake label. Aside from being semantically rubbish, this causes a real problem for screen reader users since the only information telling them what to put in the field vanishes when the element gains the focus … and screen readers don't read out the text in a field until it gains the focus! – Locke

Answer 1

Your JavaScript:

function clearContents(element) {
  element.value = '';
}

And your HTML:

<textarea onfocus="clearContents(this);">Please describe why</textarea>

I assume you'll want to make this a little more robust, so as to not wipe user input when focusing a second time. Here are five related discussions & articles.

And here's the (much better) idea that David Dorward refers to in comments above:

<label for="explanation">Please describe why</label>
<textarea name="explanation" id="explanation"></textarea>

Karlkarla

The for attribute needs to match an id, not a name! (Otherwise it would be incompatible with radio buttons) – Locke

You should get rid of the javascript: bit. It is a label with no goto. developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… If you use intrinsic event attributes then you are required to specify the language used, but this is achieved with a meta tag, not a label: w3.org/TR/html4/interact/scripts.html#h-18.2.2.1 – Locke

Strange. The second idea with a label did not work for me. – Stockman

Answer 2

You can use the placeholder attribute introduced in HTML5:

<textarea placeholder="Please describe why"></textarea>

This will place your filler text in grey that will disappear automatically when a user clicks on the text field. Additionally, it will reappear if it loses focus and the text area is blank.

Conversationalist

This is not true. It disappears when the user starts writing not on click. – Ftc

Answer 3

This is your javascript file:

function yourFunction(){
     document.getElementById('yourid').value = "";
};

This is the html file:

    <textarea id="yourid" >
    Your text inside the textarea
    </textarea>
    <button onClick="yourFunction();">
     Your button Name
     </button>

Arthritis

Answer 4

Try:

<input name="mytextbox" onfocus="if (this.value=='Please describe why') this.value = ''" type="text" value="Please Describe why">

Regeneracy

This is not a textarea, so -1. This does only delete the sample text, so +1. – Prytaneum

Answer 5

Did you mean like this for textfield?

<input type="text" onblur="if(this.value == '') this.value='SEARCH';" onfocus="if(this.value == 'SEARCH') this.value='';" size="15" value="SEARCH" name="xSearch" id="xSearch">

Or this for textarea?

<textarea id="usermsg" rows="2" cols="70" onfocus="if(this.value == 'enter your text here') this.value='';" onblur="if(this.value == '') this.value='enter your text here';" >enter your text here</textarea>

Erwinery

My version is clearing only the default value. Dolph's solution clears everything in the textfield/textarea, not only the default value. – Erwinery

Answer 6

The best solution what I know so far:

<textarea name="message" onblur="if (this.value == '') {this.value = 'text here';}"   onfocus="if (this.value == 'text here') {this.value = '';}">text here</textarea>

Diathermy

Answer 7

<textarea name="post" id="post" onclick="if(this.value == 'Write Something here..............') this.value='';" onblur="if(this.value == '') this.value='Write Something here..............';" >Write Something here..............</textarea>

Agony

Answer 8

jQuery attribute val() should do the job. You can do $('#YourTextareaID').click(function(e) { e.target.value = ''; }).

Derickderide

Answer 9

You may try this code,

<textarea name="textarea" cols="70" rows="2" class="searchBox" id="textarea" onfocus="if(this.value == 'Please describe why') this.value='';" onblur="if(this.value == '') this.value='Please describe why';">Please describe why</textarea>

Amuck

Answer 10

Here's a solution if you have dynamic data coming in from a database...
The 'data' variable represents database data.
If there is no data saved yet, the placeholder will show instead.
Once the user starts typing, the placeholder will disappear and they can then enter text.

Hope this helps someone!

// If data is NOT saved in the database
if (data == "") {
    var desc_text = "";
    var placeholder = "Please describe why";
// If data IS saved in the database
} else {
    var desc_text = data;
    var placeholder = "";
}

<textarea placeholder="'+placeholder+'">'+desc_text+'</textarea>

Frame

Answer 11

No script needed. You can use onblur and onfocus combined with the placeholder to make the text disappear and appear on the textarea.

<textarea onblur="this.placeholder='Write something..'" onfocus="this.placeholder=''" placeholder="Write something.." name="" cols="40" rows="4"></textarea>

Ftc

Answer 12

<textarea onClick="javascript: this.value='';">Please describe why</textarea>

Payment

This solution wipes out the text field every time the user clicks on it. – Maggoty