In-Field Labels jQuery Plugin

Version: 0.1.2

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.

Use

HTML

<p>
  <label for="field_id">Label Text</label><br />
  <input type="text" name="field_id" value="" id="field_id">
</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 }
label  { position:absolute; top:0; left:0}

Javascript

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

Options

Two 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

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.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