Give your forms a helping of awesome!
This plugin was born out of the need to use the label-over-field method for forms I was working on. There are other plugins out there that do pretty much the same thing, but none of them had the - for lack of a better word - sexiness that I was looking for. This implementation makes the label slide across the field☨ when gaining focus and fade out when a value is entered.
This method only really works for the following: input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], textarea, and finally there's select field support thrown in too.
☨ Uses the easing plugin if available.
Here is a list of sites that use Super Labels. If you've used this plugin and would like to add your site to the list either fork the project, update the file, and submit a pull request or let me know through my website.
A demo of some of the functionality can be found on my site here, but is also included in the repository in the
demofolder.
You need to make sure that the element containing both the field and the label has
position:relative;. Other than that, the plugin should have enough flexibility to handle most of your needs.
The quickest and easiest way to use this plugin is as follows:
// Don't forget to do this *after* the DOM has loaded. jQuery(function($) { $('form').superLabels(); });
Running the plugin on a form will automatically apply the magic to the accepted fields listed above.
If you find that you need to position the labels slightly differently, pass in
labelLeftand/or
labelTopas follows:
$('form').superLabels({ labelLeft:5, labelTop:5 });
Lastly, you can choose to ONLY apply superLabels to specific fields if you wish by selecting them instead of the form as follows:
$('input.foo, textarea.bar, select.baz').superLabels();
There are quite a number of options you can pass the plugin additional to the two I mentioned above:
autoCharLimit- Whether to automatically attempt to determine the number of characters after which to fade the label out or not (see below for more on this). (default: false)
baseZindex- The base z-index which we display on top of. (default: 0)
debug- Whether or not to show console messages. (default: false)
duration- Time of the slide in milliseconds. (default: 500)
easingIn- The easing in function to use for the slide. (default: 'easeInOutCubic')
easingOut- The easing out function to use for the slide. (default: 'easeInOutCubic')
fadeDuration- Duration of animation when it's fade only. (default: 250)
labelLeft- The distance from the left for the label. (default: 0)
labelLeft:'5px'
labelTop- The distance from the top for the label. (default: 0)
labelTop:'5px'
noAnimate- Whether or not to animate. If set to true, will function the same as a normal placeholder. (default:false)
opacity- The opacity to fade the label to. (default: 0.5)
slide- Whether or not to slide the label across the input field. (default: true)
wrapSelector- The selector for the element you have wrapping each field. (default: false)
forattribute that point to the field's
nameor
id.
Last, but not least, you can choose to only fade out the label after a certain number of characters have been typed. You can make use of this by adding a
data-sl-char-limit(as of version 1.1.2) with the number of characters you wish for any given field (simply leave it out if you don't want to use this).
For example, to make the label fade out only after 20 characters have been typed in the field:
As of version 1.2.0, you can now choose to let superLabels do the heavy lifting for you and let it automatically try to guess the character length☨. You can do this by using the above
autoCharLimitoption, or by setting the
data-sl-char-limitto
autofor a given field.
The
autoCharLimitoption will be overridden by whatever is specified in the
data-sl-char-limitattribute for that given element.
☨ Note that this is only an approximation. Unless a mono-spaced font is used, there isn't a method of figuring out exactly what length the characters are that isn't expensive in terms of performance.
According to the spec placeholders are meant to be used to represent "a short hint (a word or short phrase) intended to aid the user with data entry." NOT as a replacement for labels.
The way superLabels uses placeholders (as of version 1.1.1) is as follows:
Below I'll list any bugs that I'm aware of and will try to get around to fixing as soon as I can.
MIT License - http://remybach.mit-license.org/