javascript:Display value in 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.

Textareas are supposed to hold their values inside/between their tagname. — user625860
– user625860, Commented Sep 25, 2012 at 11:28
Are you missing a quote here? style="height:44px;" rows="2" and +1 @elias94xx — 321X
– 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
– 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
– 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
– James Allardice, Commented Sep 25, 2012 at 11:41

StaticVariable · Accepted Answer · 2012-09-25 11:47:17Z

2

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>

edited Sep 25, 2012 at 11:47

answered Sep 25, 2012 at 11:33

StaticVariable

5,2934 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1495475 Over a year ago

:Im sorry I still have a problem of the value="somevalue",its not displaying this value.default value worked for me.

StaticVariable Over a year ago

see the edited answer.I wrote a/c to input type="text".i didn't see the textbox

user1495475 Over a year ago

what font,family is that this website is using in Title textbox?that textbox you`ll get when you click on "Ask Questions".This should apply only for Default Text.Please suggest me.

StaticVariable Over a year ago

textarea {     border: 1px solid #999999;     font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;}

this is for stackoverflow

user1495475 Over a year ago

but this is not only for default text.Can`t we separate?

Fabrizio Calderan · Accepted Answer · 2012-09-25 11:27:55Z

2

the correct way is

<textarea ...>defaulttext</textarea>

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

answered Sep 25, 2012 at 11:27

Fabrizio Calderan

124k26 gold badges172 silver badges183 bronze badges

3 Comments

user1495475 Over a year ago

@fabrizo:Im sorry,wats working fiddle??im using IE8.placeholder doesnt work.

Fabrizio Calderan Over a year ago

jsfiddle.net or jsbin.com : you could write and share an example demo including markup, css, javascript reproducing your code in short.

RobG Over a year ago

That is the correct way to set the default value, but it won't imitate the placeholder attribute. And much better to post the code here than on another site.

Talha Ahmed Khan · Accepted Answer · 2012-09-25 11:35:50Z

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>

edited Sep 25, 2012 at 11:35

answered Sep 25, 2012 at 11:29

Talha Ahmed Khan

15.6k10 gold badges46 silver badges49 bronze badges

1 Comment

user1495475 Over a year ago

:Thanks for the answer.It worked.I didnt know that defaultValue will be the text entered between tags.Thanks a lot again.

Anoop · Accepted Answer · 2012-09-25 11:31:08Z

0

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>

answered Sep 25, 2012 at 11:31

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Collectives™ on Stack Overflow

javascript:Display value in textarea

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related