CODEWITHSUNDEEP
javascripthtmltextarea
Karem
Karem

Reputation: 18123

How to clear textarea on click?

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?

Upvotes: 51

Views: 192958

Answers (12)

Gass
Gass

Reputation: 9402

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>

Upvotes: 0

Gigazelle
Gigazelle

Reputation: 1389

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.

Upvotes: 41

Matt
Matt

Reputation: 1

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>

Upvotes: 0

WillyMilimo
WillyMilimo

Reputation: 467

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

Upvotes: 0

user2967131
user2967131

Reputation: 11

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>

Upvotes: 0

emcee22
emcee22

Reputation: 1889

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>

Upvotes: 10

Heart
Heart

Reputation: 518

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

Upvotes: 0

nmsdvid
nmsdvid

Reputation: 2898

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>

Upvotes: 1

tildy
tildy

Reputation: 1009

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>

Upvotes: 5

Dolph
Dolph

Reputation: 50710

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>

Upvotes: 54

Paul Kearney - pk
Paul Kearney - pk

Reputation: 5543

Try:

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

Upvotes: 5

user318747
user318747

Reputation: 1428

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

Upvotes: -2

Related Questions