https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin

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 and leaving brings back the label.
https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin

Last synced: 3 months ago
JSON representation

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 and leaving brings back the label.

• Host: GitHub
• URL: https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin
• Owner: dcneiner
• Archived: true
• Created: 2009-08-05T13:20:34.000Z (over 15 years ago)
• Default Branch: master
• Last Pushed: 2016-04-12T15:03:34.000Z (over 8 years ago)
• Last Synced: 2024-07-20T03:19:16.215Z (4 months ago)
• Language: JavaScript
• Homepage: http://fuelyourcoding.com/scripts/infield/
• Size: 302 KB
• Stars: 404
• Watchers: 9
• Forks: 95
• Open Issues: 0
• Metadata Files:
  • Readme: README.textile

Awesome Lists containing this project

README

        
h1. In-Field Labels jQuery Plugin

*Version:* 0.1.5

*License:* "Same as jQuery (Dual GPL + MIT)":http://docs.jquery.com/License

*Author:* "Doug Neiner":http://pixelgraphics.us/company

*Size:* Under 1KB Minified and gzipped

h2. 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 and leaving brings back the label.

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

h2. 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. (Fixed thanks to @zawaideh!)

There may still me a few cases where you will still have an issue with overlapping labels and autocompleted fields. In these cases, you can turn on polling by passing `pollDuration` with a number larger than 0. If you want to turn polling on globally for your usage, change the default: `$.InFieldLabels.defaultOptions.pollDuration = 300`. (Thanks to @fakeartist for the basis for this feature!)

h2. Use

h3. HTML




  Label Text


  





h3. 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; cursor: text }



h3. Javascript


$(document).ready(function(){

  $("label").inFieldLabels();

});



h2. 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" ]

h2. Paste Support via "esumerfd":http://github.com/esumerfd

The in-field-label is implemented as a label presented over the top of the text field (or under, depending on the CSS used). The label tag does not support a paste operation, but the input element does. Depending on your CSS definitions there may be a few pixels around the edge of the label that will allow the paste context menu option to appear, or the entire label may be below the input also allowing the context menu. When the paste event is used, this plugin captures it and clears out the label. _(Note: this only works in browsers that fire a paste event.)_

Note that the implementation just clears the label blindly. No check is made for text field contents. There are two reasons for this:

* When the paste event fires the data has not be entered into the text field value yet so any comparison with empty will fail anyway.

*  The worst case senario would be the pasting of a single space to the text field. There is no way to copy/cut an empty string so all a user can do is paste a single space which should remove the label anyway.

h2. Changelog

*Version 0.1.5*

* Added `bower.json` _Special thanks to "Stephen Way (@stephenway)"(https://github.com/stephenway) for contributing this file._

* Fixed issue where label could still be selected even with opacity set to 0.0. _Special thanks to "Eric Kelly (@clearbucketLabs)":https://github.com/clearbucketLabs for contributing this fix._

*Version 0.1.4*

* Add support for a class name to be applied to enhanced label elements. Off by default to not break existing implementations should a existing class name be in use. _Special thanks to "Benjamin S. Leveritt (@bensleveritt)":https://github.com/bensleveritt for contributing this addition._

*Version 0.1.3*

* Added support for polling (to aid in pesky autocomplete overlap issues). _Special thanks to "@fakeartist":https://github.com/fakeartist for contributing the basis of this solution._

* Added support for `enabledInputTypes` and optimized field filtering. _Special thanks to "Daniel Abernathy (dabernathy89)":https://github.com/dabernathy89 for contributing this improvement._

* Fixes to problems with autocomplete on first document load and while inputting data _Special thanks to "Zaid (zawaideh)":https://github.com/zawaideh for contributing this improvement_

* Added (anvil):http://anviljs.com build system

* Switched to uglify for minification (Via anvil.uglify)

* Added documentation about hiding the <br> shown in the examples

* Fixed issue on id's that have special characters in them

* Added number to the default list of input fields allowed

* Added a show call to the else statement when the plugin spins up that allows the labels to start hidden _Note: (Though the developer should only hide them when JS is enabled)_

*Version 0.1.2*

* Added support for a paste event. _Special thanks to "Ed Sumerfield (esumerfd)":http://github.com/esumerfd for contributing this improvement._

*Version 0.1.1*

* Added support for HTML5 text fields: search, tel, url, email. _Special thanks to Tom Adams (holizz) for contributing this improvement._

*Version 0.1*

* Initial Release