jQuery Floating Placeholder Text Plugin - Placeholder Label

File Size: 214 KB
Views Total: 14079
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Floating Placeholder Text Plugin - Placeholder Label

Placeholder Label is a jQuery input placeholder enhancement plugin that displays a floating top aligned label containing placeholder text when you're typing.

See also:

How to use it:

1. Include the latest version of jQuery library and jQuery placeholder label plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="src/jquery.placeholder.label.js"></script> 

2. Create an input field with the Html5 placeholder attribute.

<input id="name" type="text" placeholder="Enter your name" alt="Name" value="jQueryScript">

3. Call the plugin on the input field with default settings.

<script type="text/javascript">
$(document).ready(function (){

4. All the default settings.

$(document).ready(function (){

    // placeholder color
    placeholderColor: "#898989", 

    // label color
    labelColor: "#4AA2CC",

    // size of label
    labelSize: "14px"

    // font style
    fontStyle: "normal", 

    // uses border color
    useBorderColor: true, 

    // displayed in the input
    inInput: true, 

    // time to move
    timeMove: 200 

5. Style your input field via CSS to fit your needs.



  • Added font-style setting

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