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.

No value

Initial value

No value on a textarea

Initial value on a textarea Initial value

api

init(options)

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.

floatingLabel.init({
  floatingClassName: 'custom-class', // defaults to 'floating'
  delegateEvents: true // defaults to false
});

evaluateInputs()

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.

floatingLabel.evaluateInputs();

Floating Label is licensed under the Apache 2.0 license.

Copyright 2015 Datu Health, Inc.