Minimal Floating Placeholder Plugin With jQuery - floatPlaceHolder.js

Minimal Floating Placeholder Plugin With jQuery - floatPlaceHolder.js
File Size: 4.64 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="//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.