Description
This plugin allows you to use placeholders as labels in your Bootstrap forms. Its original idea of Float Label belongs to Matt D. Smith. I was inspired by clubdesign's Floatlabels, although there are some differences:
- It fully supports Bootstrap ~> 3.0
- No markup changes required if used with Bootstrap
- It uses
:beforepseudo-element instead of adding its own element for label - All styles are in
src/labelholder.lessfile, easily customizable for non-default form padding values - It does not change element's height causing the whole page content to go a bit down
- And it does not require you to use non-equal paddings
Installation
Assuming you already have a bootstrap form:
- Include
labelholder.jsafter jQuery script tag - Include
labelholder.cssafter bootstrap styles, but before your own style overrides
<head> <!-- ... --> <script src="jquery.js" type="text/javascript"></script> <script src="labelholder.js" type="text/javascript"></script> <style src="bootstrap.css" type="text/css"></style> <style src="labelholder.css" type="text/css"></style> <style src="your_styles.css" type="text/css"></style> <!-- ... --> </head>If you use LESS and you want to precompile it with your own padding variables set, import only src/less/labelholder file:
@import "bootstrap_and_overrides"; @import "src/less/labelholder";It will take your padding variables from overrides and apply them, instead of Bootstrap defaults, which are also stored in src/less/variables.less file.
Usage and configuration
Just call .labelholder() on all your input wrappers (for Bootstrap, it's .form-group, and .input-group. Don't forget to add a placeholder!
<div class="form-group labelholder"> <input class="form-control" type="text" placeholder="Try typing here..."> </div> $('.labelholder').labelholder()Custom floating label
If you want to have floating label text to be different from placeholder, then add data-label attribute to wrapping div. Example:
<div class="form-group labelholder" data-label="See how it works?"> <input class="form-control" type="text" placeholder="Try typing here..."> </div> $('.labelholder').labelholder()Custom change events
There are three events which are listened to by default: keyup, blur, change. Just pass your own string events option with a list to your labelholder() call:
$('.labelholder').labelholder({ events: 'keyup custom_event' })Custom elements
Labelholder is being attached to input[type=text], input[type=date], textarea. If you want to add other input types, just pass custom your input types as a string in a elements option:
$('.labelholder').labelholder({ elements: 'input[type=text], input[type=date], input[type=email], textarea' })Contributing
Check CONTRIBUTING.md for more information.
License
MIT License © Felix Borzik
