Matthew Jordan

Web Design & Development

jQuery Minimal Placeholder Plugin

(jQuery Plugin)

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...


1 <input type="text" name="NAME" id="myInput" data-placeholder="Your Name Here">

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.


1 $('#myInput').placeHolder();

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...

1 <input type="text" name="NAME" id="myOwnClass" data-placeholder="Email Address">

Below we add a simple CSS class to define the text color

1 .diffColor { color:#600 }

Last, we define the new CSS class in the plugin's call

1 $('#myOwnClass').placeHolder('diffColor');

And the result is below




Comments