Handy plugin that takes a simpler approach to tackling placeholder attribute support in older browsers. If you have a lot of logic & validation occuring on form submit, existing plugins can struggle to behave themselves. Instead of attempting to simulate the placeholder text inline with the input like most plugins, this simply creates a text nod…

jquery.simple-placeholder.min.js

/**
 * Simple Placeholder Fallback
 * 
 * A simpler and more robust method for adding fallback input placeholder support for 
 * browsers that dont support the attribute.  No value spoofing, hidden input creation
 * or other crazy methods. Simply appends the placeholder text after the input as help 
 * text. 
 * 
 * Simple & works with even the craziest validation and form submission logic, which is where
 * the other techniques struggle.
 * 
 * @author Christopher Imrie
 * 
 * eg: 
 * 	HTML:
 * 	<input name="address1" type="text" placeholder="Address Line 1"/>
 * 
 * 	JS:
 * 	$("input").placeholder();
 * 
 * HTML Result:
 * 	<input name="address1" type="text" placeholder="" class="placeholder-added"/>
 * 	<span class="help">Address Line 1</span>
 * 
 * Browsers that support the placeholder attribute remain unaffected
 */
(function (window, document, $) {

	var isInputSupported = 'placeholder' in document.createElement('input'),
		isTextareaSupported = 'placeholder' in document.createElement('textarea');

	/**
	 * Placeholder Fallback
	 * @constructor
	 */
	function Placeholder() {

		/**
		 * Initialise Placeholder Processing
		 *
		 * @param {jQuery} $items
		 */
		this.init = function ($items) {
			console.log("init")
			//Cycle through items and detect placeholder
			$items.each(this.processItem);
		}

		/**
		 * Process node for placeholder detection & fallback
		 *
		 * @param {HTMLBaseElement} item
		 */
		this.processItem = function (i, item) {
			var $node,
				placeholder = $(item).attr("placeholder");

			//No placeholder? We're done.
			if (!placeholder) {
				return;
			}

			//Append a span after the input that contains the placeholder text
			$node = $(document.createElement("span")).text(placeholder).addClass("help");
			$(item)
				.after($node)
				.addClass("placeholder-added")
				.attr("placeholder", "");
		}

		this.init(this);
	}

	//Placeholder supported
	if (isInputSupported && isTextareaSupported) {
		$.fn.placeholder = function () {
		};
	} else {
		//Not supported...
		$.fn.placeholder = Placeholder;
	}
}(this, document, jQuery));