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