jQuery Plugin For Floating Placeholder Label Text - JVFloat.js

File Size: 10.4 KB
Views Total: 5555
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Floating Placeholder Label Text - JVFloat.js

JVFloat.js is a simple yet user-friendly jQuery plugin for creating a Floating Label Text effect using HTML5 and CSS3, which is inspired by Matt D. Smith's Mobile Form Interaction. The plugin allows you to create a text input field with placeholder that the placeholder text fades out and a top aligned label animates in when the field is populated with text.

One picture is worth more than thousands of words:

jQuery JVFloat.js Demo

Basic Usage:

1. Include required jvfloat.css in the head section of your page

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

2. Include jQuery library and jQuery JVFloat.js in the footer to reduce the page load time.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jvfloat.min.js"></script>

3. Create a standard text input field with placeholder attribute.

<input type="text" placeholder="My Placeholder Text" class="demo">

4. Just call the plugin and we're done.


Change log:


  • bugfix


  • v1.1.0


  • add ability to redefine CSS on multiline textarea


  • Added support for textarea


  • add support for pre-populated fields

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