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




CKEditor On Air: Part 2

2 08 2010

In the first part of this serie i explained the steps needed to run the CKEditor in the Adobe Air runtime and how to load data from actionscript to the CKEditor instance running in Air.

This part explains how to send the data from the CKEditor instance back to the Air application, using a new CKEditor plugin called airsave. The sources for this part are available as an update to the sources of part 1.

Read the rest of this entry »