Minimal Floating Placeholder Plugin With jQuery - floatPlaceHolder.js

File Size: 4.64 KB
Views Total: 1820
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="//"></script>
<script src="js/floatPlaceHolder.js"></script>

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


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