I`m trying to display default value in textarea,on click it should clear existing data and onblur it should display default text.Following is my code->

<textarea class="TextArea" id="appfield" name="appfield" style="height:44px;" rows="2" onfocus="deletetext(this)" onblur="filltext(this)" value="defaulttext"></textarea>

value is not displaying in textarea.what`s wrong???We have similar case in this website in Title textbox.I have to implement the same in my case. Please suggest an answer.

I`m trying to display default value in textarea,on click it should clear existing data and onblur it should display default text.Following is my code->

<textarea class="TextArea" id="appfield" name="appfield" style="height:44px;" rows="2" onfocus="deletetext(this)" onblur="filltext(this)" value="defaulttext"></textarea>

value is not displaying in textarea.what`s wrong???We have similar case in this website in Title textbox.I have to implement the same in my case. Please suggest an answer.

• javascript
• html

• Textareas are supposed to hold their values inside/between their tagname. – user625860 Commented Sep 25, 2012 at 11:28
• 1 Are you missing a quote here? style="height:44px;" rows="2" and +1 @elias94xx – 321X Commented Sep 25, 2012 at 11:28
• Sounds like you might be trying to replicate the functionality of the placeholder attribute. Why not just use that? There are numerous polyfills to make it work in older browsers. – James Allardice Commented Sep 25, 2012 at 11:28
• @JamesAllardice:Im using IE8,placeholder doesnt work. I have to implement the same case as the Title box of this site have.onBlur, onfocus have to do.But the prob is vallue='default text' itself not displaying. – user1495475 Commented Sep 25, 2012 at 11:38
• @user1495475 - As I mentioned, you can use a polyfill to make placeholder work in older browsers. As has already been stated, you need to put the value inside the <textarea> tags, and get rid of the value attribute. – James Allardice Commented Sep 25, 2012 at 11:41

4 Answers 4

You can use this

 <textarea  id="username"  name="username" 
onfocus="if(this.value=='somevalue') { this.value='';this.style.color='#333333';}" 

onblur="if(this.value=='') {this.value='somevalue'; this.style.color='#B2B2B2';}">
somevalue
</textarea>

the correct way is

<textarea ...>defaulttext</textarea>

but you should set up a working fiddle (functions included) to reproduce the issue.

If you have an option and want to use HTML5 you can do it by using placeholder attribute.

<textarea 
    class="TextArea" 
    id="appfield" 
    name="appfield" 
    style="height:44px; 
    rows="2" 
    placeholder="default text"
    value=""></textarea>

Other option is

<textarea 
    onfocus="if(this.value==this.defaultValue)this.value='';"
    onblur="if(this.value=='')this.value=this.defaultValue;"
    class="TextArea"
    id="appfield" 
    name="appfield" 
    style="height:44px; 
    rows="2">default text</textarea>

Instead of using JavaScript you can use placeholder. jsfiddle. but placeholder not supported by older browsers. you can use jquery libratry.

<textarea class="FullTextArea" id="applyfieldscontrol" name="applyfieldscontrol" style="height:44px"  placeholder="defaulttext"></textarea>