javascript：在textarea中显示值

Question

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.

Answer 1

the correct way is

<textarea ...>defaulttext</textarea>

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

Answer 2

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>

Answer 3

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>

Answer 4

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>