CODEWITHSUNDEEP
javascript
Frankie G
Frankie G

Reputation: 91

Example text in textarea onload

I'm trying to create a textarea which will have some examples for users to view before they click in the area (example disappears) and they can add their own stuff. I've got this so far but it doesn't load the example when I open the page, I tried using and onload but that didn't seem to work, the function works fine if I click in the area and then blur but the user shouldn't have to do that, any ideas where I'm going wrong

<textarea STYLE='background:white; height:80; width:100%;' name="kpi_notes" value="Example"
onfocus="if (this.value == 'Example') {
  this.value = '';
  this.style.color = '#B300A1';
}"
onblur="if (this.value == '') {
  this.value = 'Example'
  this.style.color = '#919191';
}"
style="color:#919191"; ></textarea>

Upvotes: 2

Views: 1366

Answers (4)

jhc
jhc

Reputation: 1769

Whatever you put inbetween the two tags is the default value.

For example:

<textarea>Text hint</textarea>

Upvotes: 0

Yaroslav
Yaroslav

Reputation: 2438

I think you need to use innerHTML instead value So textarea doesn't have value property at all

Upvotes: 0

Amadan
Amadan

Reputation: 198486

<textarea name="kpi_notes" placeholder="Example">
</textarea>

Doesn't work on IE9. Screw IE.

Upvotes: 1

Alex Osborn
Alex Osborn

Reputation: 9851

For a textarea element, the value should be between the tags, not set as value="Example".

<textarea STYLE='background:white; height:80; width:100%;' name="kpi_notes"
onfocus="if (this.value == 'Example') {
  this.value = '';
  this.style.color = '#B300A1';
}"
onblur="if (this.value == '') {
  this.value = 'Example'
  this.style.color = '#919191';
}"
style="color:#919191"; >Example</textarea>

Alternatively consider using the placeholder attribute, if your target browsers support it:

<textarea placeholder="Example"></textarea>

Upvotes: 4

Related Questions