https://github.com/foo4u/jquery-html5placeholders

jQuery plugin to simplify working with HTML forms when HTML5 placeholder support is present.
https://github.com/foo4u/jquery-html5placeholders

Last synced: about 2 months ago
JSON representation

jQuery plugin to simplify working with HTML forms when HTML5 placeholder support is present.

• Host: GitHub
• URL: https://github.com/foo4u/jquery-html5placeholders
• Owner: foo4u
• Created: 2012-04-10T19:20:12.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2014-02-17T23:41:42.000Z (almost 11 years ago)
• Last Synced: 2024-10-10T10:59:57.682Z (3 months ago)
• Language: JavaScript
• Size: 268 KB
• Stars: 4
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jQuery HTML5 Placeholders Plugin

================================

Provides a [jQuery](http://jquery.com/) plugin to simplify working with HTML labels and HTML5 placeholders

in form input tags.

This plugin aims to simplify development of forms in which you want display  `input` tags with HTML5 placeholders

instead of `label` tags on clients that support HTML5 but fall back to `label` tags when the placeholder attribute

isn't supported while maintaining screen reader compatibility.

You code your forms with standard `label` elements and then invoke this plugin to convert those labels into

placeholders. The plugin operates using [progressive enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) to provide backwards compatibility with browsers lacking placeholder support.

Usage

-----

	

	

		

	

		$(document).ready(function() {

			// replace formId with the id of your form element 

			$('#formId').html5placeholders();

		});

	

As of release 1.2, the `hide` function is customizable, and by default, hides `label` tags using inline styles.

To restore behavior similiar to 1.0 and 1.1 releases, override the hide function:

	

		$(document).ready(function() {

			$('#formId').html5placeholders({

				hide: function(el) { el.hide() }

			});

		});

	

If you're using [Bootstrap][bootstrap] or already have a custom screen reader specific hide class you'd like to use,

override the `hide` function and apply that class to the `label` element:

	

		$(document).ready(function() {

			$('#formId').html5placeholders({

				hide: function(el) { el.addClass('sr-only'); }

			});

		});

	

Sample Code

-----------

Create an HTML form with a label for each input:

	

		


			First & Last Name

			

		

	


On browsers that support HTML5 placeholders, this plugin converts the form to:

	

		


			

		

	


Demo

----

This plugin will progressively enhance an HTML form by hiding labels and using the label text as a placeholder

in the input field.

![Before Enhancement][before_image]

This will be converted to the view below, only if the browser supports placeholders.

![After Enhancement][after_image]

Requirements

------------

This plugin requires [jQuery](http://jquery.com/) 1.4 or newer.

Testing

-------

Tested with desktop browsers:

* Google Chrome / Mac OS

* Safari / Mac OS

* IE 9 / Windows 7

Tested with mobile browsers:

* Mobile Safari / iOS 5

* Google Chrome / Android 4.0

* IE 9 / Windows Phone 7.5

[before_image]: https://s3.amazonaws.com/jquery-html5placeholders/html5placeholder_demo_before.png

[after_image]: https://s3.amazonaws.com/jquery-html5placeholders/html5placeholder_demo_after.png

[bootstrap]: http://getbootstrap.com