In-Field Labels jQuery Plugin

Samples

Comment Form





Login Form



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 }
form p br { display: none }
label  { position:absolute; top:0; left:0}

Javascript:

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

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 `0` 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 `false` or `""` 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" ]

Changelog

Version 0.1.5

Version 0.1.4

Version 0.1.3

Version 0.1.2

Version 0.1.1

Version 0.1

Download