In-Field Labels jQuery Plugin

Version: 0.1.5

License: Same as jQuery

Author: Doug Neiner

Size: Under 1KB Minified and gzipped

Overview

This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

Browser Support

IE6+, WebKit Browsers (Safari, Chrome), Firefox 2+

* IE6 requires a background-color be set on the label to match the background of the field.

Known Issues

Browser Auto-Complete can cause problems in hiding the labels. Less of an issue for Login Boxes, but much more of an issue with comment forms. (Fixed thanks to @zawaideh!)

There may still me a few cases where you will still have an issue with overlapping labels and autocompleted fields. In these cases, you can turn on polling by passing `pollDuration` with a number larger than 0. If you want to turn polling on globally for your usage, change the default: `$.InFieldLabels.defaultOptions.pollDuration = 300`. (Thanks to @fakeartist for the basis for this feature!)

Use

HTML

<p>
  <label for="field_id">Label Text</label><br />
  <input type="text" name="field_id" value="" id="field_id" placeholder="">
</p>

CSS

More CSS is needed to position the label nicely over the input or text area element, but since it all depends on how you have styled those elements, only the bare-bones are listed here. Keep in mind any block element can surround the label and input field. <p> is used as an example.

form p { position: relative }
form p br { display: none }
label  { position: absolute; top: 0; left:0; cursor: text }

Javascript

$(document).ready(function(){
  $("label").inFieldLabels();
});

Options

Options can be passed along with the method or set ahead of time for all inFieldLabel controls.

To set them ahead of time, use the following syntax:

$.inFieldLabels.defaultOptions.optionName = "";

To pass them at call time, use the following syntax:

$("label").inFieldLabels({ optionName:value });

fadeOpacity: Value between 0.1 and 1.0.
When a field is focussed, its label is animated to this opacity. Defaults to 0.5

fadeDuration: Time in milliseconds
When an animation occurs, it uses this setting to determine duration. Defaults to 300

pollDuration: Time in milliseconds or `0` to disable polling
If set to a number greater than zero, the code will check the value of the field at the specified interval until content is detected in this field. Once content is detected or entered, the polling stops for this field.

*className: A class to be applied to each label that is enhanced. Set to `false` or `""` and a class will not be set. Defaults to false

enabledInputTypes: Array of input types to allow
It is not normally desireable for checkbox and radio input types to have their labels fade out. This allows you to control which input types are allowed. Defaults to: [ "text", "search", "tel", "url", "email", "password", "textarea" ]

Paste Support via esumerfd

The in-field-label is implemented as a label presented over the top of the text field (or under, depending on the CSS used). The label tag does not support a paste operation, but the input element does. Depending on your CSS definitions there may be a few pixels around the edge of the label that will allow the paste context menu option to appear, or the entire label may be below the input also allowing the context menu. When the paste event is used, this plugin captures it and clears out the label. (Note: this only works in browsers that fire a paste event.)

Note that the implementation just clears the label blindly. No check is made for text field contents. There are two reasons for this:

• When the paste event fires the data has not be entered into the text field value yet so any comparison with empty will fail anyway.

• The worst case senario would be the pasting of a single space to the text field. There is no way to copy/cut an empty string so all a user can do is paste a single space which should remove the label anyway.

Changelog

Version 0.1.5

• Added `bower.json` Special thanks to “Stephen Way (@stephenway)”(https://github.com/stephenway) for contributing this file.
• Fixed issue where label could still be selected even with opacity set to 0.0. Special thanks to Eric Kelly for contributing this fix.

Version 0.1.4

• Add support for a class name to be applied to enhanced label elements. Off by default to not break existing implementations should a existing class name be in use. Special thanks to Benjamin S. Leveritt for contributing this addition.

Version 0.1.3

• Added support for polling (to aid in pesky autocomplete overlap issues). Special thanks to @fakeartist for contributing the basis of this solution.
• Added support for `enabledInputTypes` and optimized field filtering. Special thanks to Daniel Abernathy for contributing this improvement.
• Fixes to problems with autocomplete on first document load and while inputting data Special thanks to Zaid for contributing this improvement
• Added (anvil):http://anviljs.com build system
• Switched to uglify for minification (Via anvil.uglify)
• Added documentation about hiding the <br> shown in the examples
• Fixed issue on id’s that have special characters in them
• Added number to the default list of input fields allowed
• Added a show call to the else statement when the plugin spins up that allows the labels to start hidden Note: (Though the developer should only hide them when JS is enabled)

Version 0.1.2

• Added support for a paste event. Special thanks to Ed Sumerfield for contributing this improvement.

Version 0.1.1

• Added support for HTML5 text fields: search, tel, url, email. Special thanks to Tom Adams (holizz) for contributing this improvement.

Version 0.1

• Initial Release