Current Version: 1.3, 795 bytes
Play with it on
JSFIDDLE
View Info
or
Download
on Github
This simple jQuery plugin allows you to easily create cross-browser placeholder text in any <input> or <textarea> element.
Here's how it works...
Above is an input element with an HTML5 Data attribute (data-placeholder) set with the desired Placeholder text. This plugin will use the value defined in the Data attribute (when first called) to create the value attribute, and then fill it with the value.
When the element is focused (selected), the value will disappear and the font color will return to normal. When the element is blank and blurred (deselected), the font color goes back to the pre-set or custom state and the Data value is re-inserted.
And the result is the example below
Please note that the above example uses the default fade color #999999
But! If you don't want to use the plugin's default fade color (the color of the placeholder text) you can define your own class. (I chose to define a class instead of just a color here because a class will give you more control over the look and feel of the "input" or "textarea".)
Here's how it works...
Below we add a simple CSS class to define the text color
Last, we define the new CSS class in the plugin's call
And the result is below