In-Field Labels jQuery Plugin

Version: 0.2.1

License: Same as jQuery

Authors: Doug Neiner, Adrien Lavoillotte

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

jQuery 1.6+ is required.

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. This is why the plugin disables Auto-Complete by default (configurable, see the disableAutocomplete option).

Selecting the text and then right-click > delete is not supported. If you really need to support it, the only true, cross-browser way would be to check the field every n milliseconds:

// after plugin is called
var labels = $('label.in-field');
window.setInterval(function(){ labels.each(function(){ $.data(this, 'InFieldLabels').updateState(); }) }, 100);

If you do this, I recommend to set the emptyWatch option to false.

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.in-field {
  position: absolute;
  top: 0; left: 0;
  cursor: text;
  pointer-events: none; }

Javascript

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

Options

Five 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

labelClass: String (CSS class to be applied to the label)
When the label becomes in-field, this class is applied to the label. This allows fallback styling for label that will not be in-field, for various reasons (inelligible, JavaScript is disabled, an error occured…). Defaults to ‘in-field’

disableAutocomplete: Boolean
If true, disable browser auto-complete: the matching field gets autocomplete=off, which prevents some overlay errors when the field is still focused. Defaults to true

emptyWatch: Boolean
If true, keep watching the field as the user types. This allows the plugin to bring back the label as soon as it is empty, which prevents some overlay errors when the field is still focused. Defaults to true

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.

Placeholders

Placeholder is a cool feature for HTML5 inputs and textareas that let you specify a sample/advice text in the form field when the user has not typed anything in. It is semantically different from in-field label (and so should have different markup). The role of a placeholder is to suggest an example of input, or give a hint on the format. For instance, you would have a label “date of birth” and a placeholder of “MM-DD-YYYY”.

Current browser implementations of placeholder empty the field as soon as it gains focus, as the W3C specification states, except for Safari (not Chrome).

If a placeholder attribute is present on the field referenced by the label, the plugin is not applied to that label, thus preventing the overlap. Even if placeholders are not supported by the browser, to ensure interface consistency.

Changelog

Version 0.2.1

• Fixed a bug with IE7 that caused the label’s for attribute to be considered empty.

Version 0.2 by Adrien Lavoillotte / streetpc

• Refactored the plugin into a state machine with unified event handling and transitions.

• Faster selection and invalidation, supports IDs with special characters.

• Added support for different CSS styling, labelClass option. Special thanks to Trevor Davis / davist11 for this idea.

• Restore label as soon as the field is empty, emptyWatch option, support for a cut event.

• Less cases for autocomplete bug (keyup), plus disableAutocomplete option.

• Avoid placeholder overlap.

• Added support for other HTML5 text fields: number, date, time, datetime, datetime-local, month, week.

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

To Do

• “À la Safari” placeholder polyfill if the browser doesn’t support placeholders. Technically the same behavior, so we could just wrap the matched field, prepend a <label> and apply the plugin.

• Detect Safari and inject the label content into the placeholder attribute of the targeted field, since a native implementation will be faster and cleaner.

• Offer a setInterval implementation, with automatic label collecting and no keyup (un)binding.

• Legacy jQuery support (and possibly performance gain) by setting a flag (say, base.focus) to true on focus and to false on blur. Use this flag instead of the base.$field.is(':focus') test. The rest of the code should work with jQuery 1.4+, maybe even 1.3+.