I basically want to recreate the HTML5 "placeholder" attribute, using JavaScript, so that it is patible with older browsers.

I am using a bination of OnFocus and OnBlur which is easy enough, I have done that with the following code;

<textarea onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Placeholder text</textarea>

The placeholder text is going to be a light grey (#CCC) and then when the textarea is focused on it will change to a darker grey (#333). This is acplished without a problem in the CSS, however, if the content of the textarea is different to the original placeholder, I want the colour to remain the dark grey when not focused.

If my explanation is poor, then here is a (very slightly) better explanation;

Page loads ---> textarea placeholder = #CCC ---> user focuses on textarea ---> textarea content bees #333 ---> user releases focus ---> the content should change back to #CCC unless it has been altered, in which case it should stay #333

The bold bit is what I need help with!

Thanks! :D

Edit: The fact that the placeholder disappears on focus is not an issue and doesn't need to be "fixed"

I basically want to recreate the HTML5 "placeholder" attribute, using JavaScript, so that it is patible with older browsers.

I am using a bination of OnFocus and OnBlur which is easy enough, I have done that with the following code;

<textarea onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Placeholder text</textarea>

The placeholder text is going to be a light grey (#CCC) and then when the textarea is focused on it will change to a darker grey (#333). This is acplished without a problem in the CSS, however, if the content of the textarea is different to the original placeholder, I want the colour to remain the dark grey when not focused.

If my explanation is poor, then here is a (very slightly) better explanation;

Page loads ---> textarea placeholder = #CCC ---> user focuses on textarea ---> textarea content bees #333 ---> user releases focus ---> the content should change back to #CCC unless it has been altered, in which case it should stay #333

The bold bit is what I need help with!

Thanks! :D

Edit: The fact that the placeholder disappears on focus is not an issue and doesn't need to be "fixed"

• javascript
• html
• css
• placeholder

• Just to clear things up, if the text is different to "Placeholder text" then the colour should remain as #333 when the textarea loses focus. If the text is "Placeholder text" or left blank, then the colour should revert to #CCC. – Michael Ruta Commented Aug 25, 2012 at 11:38

2 Answers 2

http://jsfiddle/DszSR/

​textarea {
  color: #ccc;
}​

<textarea
  onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#333';"
  onblur="if(this.value=='') this.value=this.defaultValue; this.style.color = '#ccc';">Placeholder text</textarea>​

You still have to set the text-color to #CCC on page load with CSS or JS (My code overrides that setting if it gets focused and restores it on blur only if needed)

<textarea onfocus="if(this.value==this.defaultValue)this.value='';this.style.color='#333'" onblur="if(this.value=='') {this.value=this.defaultValue;this.style.color='#CCC'}">Placeholder text</textarea>​