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
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.
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()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()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' })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' })Check CONTRIBUTING.md for more information.
MIT License © Felix Borzik