JQuery Inline-Field-Label plugin: a better approach

30 08 2010

There are several  solutions available on the internet for implementing labels inside a text field as shown in the example screenshot below.

Example of inline form labels

Example of inline form labels

Most of these implementations use the .focus() and .blur() functions to add/empty the input value with the label. This approach has some drawbacks though:

  • Submitting the form will submit the label when no custom data is entered.
  • When a input field needs focus on page loading then the label is never shown.

To overcome these problems i created a JQuery plugin called inFieldLabel which adds an extra span element containing the label value and with some css this span element is projected over the input text field.
/* Inline Label class*/
span.inline-label {
position: absolute;
display: none;
}

When you start typing the span element is hided.

Usage:

1) Using default label text
$("#test1").inFieldLabel();

2) Using custom label text
$("#test1").inFieldLabel({labelText:"Type your text here..."});

3) Using an attribute value of the input text field as label text (eg. “title”)
$("#test1").inFieldLabel({useAttribute:"title"});

The full source code for this plugin can be downloaded here (updated). An example of its usage can be seen here (updated) or can be downloaded here as a packaged zip file (not updated).

Advertisements