License: Same as jQuery (Dual GPL + MIT)
Authors: Doug Neiner, Adrien Lavoillotte
Download: InFieldLabels.zip
Source: GitHub
Size: Under 1KB Minified and gzipped
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 brings back the label.
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.
jQuery 1.6+ is required.
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. This is why the plugin disables Auto-Complete by default (configurable, see the disableAutocomplete option).
Selecting the text and then right-click > delete is not supported. If you really need to support it, the only true, cross-browser way would be to check the field every n milliseconds:
// after plugin is called
var labels = $('label.in-field');
window.setInterval(function(){
labels.each(function(){
$.data(this, 'InFieldLabels').updateState();
});
}, 100);
If you do this, I recommend to set the emptyWatch option to false.
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 }
label.in-field {
position: absolute;
top: 0; left: 0;
cursor: text;
pointer-events: none; }
Javascript:
$(document).ready(function(){
$("label").inFieldLabels();
});
Five 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
labelClass: String (CSS class to be applied to the label)
When the label becomes in-field, this class is applied to the label. This allows fallback styling for label that will not be in-field, for various reasons (inelligible, JavaScript is disabled, an error occured…). Defaults to 'in-field'
disableAutocomplete: Boolean
If true, disable browser auto-complete: the matching field gets autocomplete=off, which prevents some overlay errors when the field is still focused. Defaults to true
emptyWatch: Boolean
If true, keep watching the field as the user types. This allows the plugin to bring back the label as soon as it is empty, which prevents some overlay errors when the field is still focused. Defaults to true
Version 0.2.1
Version 0.2, by Adrien Lavoillotte (streetpc)
Version 0.1.2
Version 0.1.1
Version 0.1
<label> and apply the plugin.label content into the placeholder attribute of the targeted field, since a native implementation will be faster and cleaner.setInterval implementation, with automatic label collecting and no keyup (un)binding.base.focus) to true on focus and to false on blur. Use this flag instead of the base.$field.is(':focus') test. The rest of the code should work with jQuery 1.4+, maybe even 1.3+.