Question

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>

Answer 1

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>