floatingLabel.js is a small javascript library to use the floating label pattern on your own forms. It's light (1kb minified and gzipped) and simple to use.



The init method is a simple function to evaluate all the inputs on a page once the DOM has been loaded. An optional config object can be passed in to set a custom class and whether to delegate events or bind them directly on the inputs themselves.

  floatingClassName: 'custom-class', // defaults to 'floating'
  delegateEvents: true // defaults to false

The meat an potatoes of floatingLabel is in the evaluateInputs method. This will read the DOM and loop through all input or textarea elements on the page. It will either bind events to each input or delegate the events to the body.

If you have a single page app and need to bind events to a newly rendered view, run eveluateInputs.


Floating Label is licensed under the Apache 2.0 license.

Copyright 2015 Datu Health, Inc.