jQuery Plugin To Create Floating Labels For Inputs - FlowupLabels.js

jQuery Plugin To Create Floating Labels For Inputs - FlowupLabels.js
File Size: 44.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery plugin to create user-friendly floating placeholders for inputs that float the input label up above the input filed when the user is typing.

See also:

How to use it:

1. Place the required jquery.FlowupLabels.css stylesheet in the head section of the web page. This stylesheet is marked with comments indicating what should and what shouldn't be changed for your styling purposes.

<link href="css/jquery.FlowupLabels.css" rel="stylesheet">

2. Add labels for your input fields.

<label for="name">Name:</label>
<input type="text" id="name">

3. Call the plugin on the form element.

(function(){
  $('form').FlowupLabels();
})();

4. These are all the default options. You may exclude any/all of these options if you won't be changing them.

$('.form').FlowupLabels({
  
  // Handles the possibility of having input boxes prefilled on page load
  feature_onInitLoad: true, 
  
  // Class when focusing an input
  class_focused:    'focused',

  // Class when an input has text entered
  class_populated:  'populated' 

});

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