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:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js

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 (){
$('input[placeholder]').placeholderLabel();
})
</script>

4. All the default settings.

$(document).ready(function (){
  $('input[placeholder]').placeholderLabel({

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

Changelog:

2018-09-11

• 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.