jQuery Plugin For Text Field Float Label - floatlabels.js

floatlabels.js is a jQuery plugin to create an animated text label floating within the input text field when the user starts typing, inspired by Matt D. Smith's float label concept. By default, the plug will use the placeholder attribute as the label text, you can custom the text and style by using data-label and data-class attributes.

See also:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
• jQuery Animated Input Field Label Plugin - Label Better

Basic Usage:

1. Create an text input field on the web page.

<input type="text" class="demo" placeholder="User Name" data-label="Your User Name" data-class="red-label" />

2. Include the jQuery library and floatlabels.js on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="floatlabels.js"></script>

3. Initialize the plugin.

<script>
$(document).ready(function () {
$('.demo').floatlabel();
});
</script>

4. Available configurations.

$('.demo').floatlabel({

  // slide down (height) to fit the floating label.
  slideInput      : true, 

  // How many pixel the label should travel.
  labelStartTop   : '20px', 

  // Where the Label should stop animating in px from the top of the input field.
  labelEndTop     : '10px', 

  paddingOffset                   : '12px',

  // Label Transition time in seconds.
  transitionDuration : 0.3, 

  // Easing function to use. 
  transitionEasing: 'ease-in-out', 

  // Another way to add classes to the label element.
  labelClass      : '', 

  // This Regex Expression is triggered at the initializiation of the script. 
  // It checks the type="text" if the element the plugin is triggered on is valid. 
  // Some advanced users might want to expand this to the new HTML5 textfield types.
  typeMatches     : /text|password|email|number|search|url/,

  focusColor                      : '#8F6593',
  blurColor                       : '#838780'

});

Change log:

2016-11-03

• Added support for 'tel' input type

2014-08-06

• Added support for 'tel' input type

---

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