Minimal Floating Placeholder Plugin With jQuery - floatPlaceHolder.js

A smart placeholder plugin which displays floating labels in the form fields to help the user keep track of the current input field.

See also:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
• jQuery Plugin For Floating Input Label - floatingFormLabel
• jQuery Floating Placeholder Text Plugin - Placeholder Label
• jQuery Plugin For Cool Animated Input Labels
• jQuery Animated Input Field Label Plugin - Label Better
• Simple jQuery Plugin For Inplace Input Labels - LabelinPlace
• jQuery Plugin For Text Field Float Label - floatlabels.js
• jQuery Plugin To Create Floating Labels For Inputs - FlowupLabels.js

How to use it:

1. Import the required floatPlaceHolder.css that will provide the core CSS styles for the input fields and floating placeholders.

<link rel="stylesheet" href="floatPlaceHolder.css">

2. Uses the place-holder attribute to specify the custom text shown in the floating labels.

<input type="text" class="place-holder" place-holder="Source Destination" />
<input type="text" class="place-holder" place-holder="End Destination" />
<input type="text" class="place-holder" place-holder="Date" />

3. Place jQuery JavaScript library and the floatPlaceHolder.js at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/floatPlaceHolder.js"></script>

4. Call the function on the target input fields and done.

$('.place-holder').placeHolder();

---

This awesome jQuery plugin is developed by mohitkumarmehta. For more Advanced Usages, please check the demo page or visit the official website.