labelholder
labelholder copied to clipboard
Borzik
Use placeholder as labels for Bootstrap
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
Borzik