Home » Html » How to clear textarea on click?

How to clear textarea on click?

Posted by: admin November 29, 2017 Leave a comment

Questions:

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?

Answers:

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>

Questions:
Answers:

Why not simply use the placeholder attribute?

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

Questions:
Answers:

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>

Questions:
Answers:

Try:

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

Questions:
Answers:

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>

Questions:
Answers:

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>

Questions:
Answers:

Try the link below to a page I found. This seems a very good solution to the problem and doesn’t clear the text if the user enters data and taps the box again.

http://www.yourhtmlsource.com/forms/clearingdefaulttext.html

Questions:
Answers:
<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>

Questions:
Answers:

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>

Questions:
Answers:

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

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