Need help with In-Field-Labels-jQuery-Plugin?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

407 Stars 98 Forks 57 Commits 0 Opened issues


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.

Services available


Need anything else?

Contributors list

h1. In-Field Labels jQuery Plugin

Version: 0.1.5

License: "Same as jQuery (Dual GPL + MIT)":

Author: "Doug Neiner":

Size: Under 1KB Minified and gzipped

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

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

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

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!)

h2. Use

h3. HTML

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

h3. Javascript


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

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

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" ]

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

h2. Changelog

Version 0.1.5

  • Added
    Special thanks to "Stephen Way (@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 (@clearbucketLabs)": 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 (@bensleveritt)": 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
    and optimized field filtering. Special thanks to "Daniel Abernathy (dabernathy89)": for contributing this improvement.
  • Fixes to problems with autocomplete on first document load and while inputting data Special thanks to "Zaid (zawaideh)": for contributing this improvement
  • Added (anvil): 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 (esumerfd)": 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.