A fallback for HTML5s placeholder attribute when not supported by the browser

jquery.makeplaceholders.js

/**
 * Make Placeholders jQuery plugin, version 1.0
 * Copyright (c) 2012, marlun78
 * MIT License, https://gist.github.com/marlun78/bd0800cf5e8053ba9f83
 *
 * === Description ===
 * 
 * Use as a fallback for HTML5s placeholder attribute when not supported by the browser. It does this by creating a
 * placeholder element that has to be positioned over the input. This plugin does not position it for you, but it
 * makes it very easy for you to do so. 
 *
 * === Usage ===
 *   
 *  // Using default settings
 *  $('[placeholder]').makePlaceholders();
 *  
 *  
 *  // Using (some) custom settings
 *  $('[placeholder]').makePlaceholders({
 *      className: 'myInputWithAPlaceholder',
 *      wrapIn: '<div style="position: relative;"/>'
 *  });
 *
 * === Options ===
 *  
 *  NAME        TYPE        DESCRIPTION
 *  className   string      A class name that will be added to the input element.
 *                          Default value is 'hasPlaceholder'.
 * 
 *  element     string      A HTML element snippet that will become the placeholder element. 
 *                          Default value is '<div class="placeholder"/>'.
 * 
 *  hide        function    A function that will be invoked when the placeholder is to hide (when the input gets focus). 
 *                          'this' is bound to the input element and the function is passed the placeholder element as an argument. 
 *                          The default function detaches the element from the DOM, but keeps it intact in memory for later injection. 
 * 
 *  show        function    A function that will be invoked when the placeholder is to show (when the input blurs).
 *                          'this' is bound to the input element and the function is passed the placeholder element as an argument. 
 *                          The Default function adds the text to the placeholder, makes sure it has the same with as the input element 
 *                          and injects it before the input element. 
 * 
 *  wrapIn      string      A HTML element snippet containing the the code to wrap the input and placeholder with.
 *                          This can be very hady when i comes to position the placeholder element. 
 *                          Default is null (no wrapping element).
 * 
 * ===
 */
(function ($) {
    $.fn.makePlaceholders = (function () {
        'use strict';

        $.support.placeholder = 'placeholder' in document.createElement('input');

        // If built in browser support exists
        if ($.support.placeholder) {
            // Return an empty, but chainable, function
            return function () { return this; };
        }

        // If no support
        else {
            // Return a fallback plugin 
            return function (options) {
                var key, settings;

                key = '__plchldr__';

                // Extend the defaults with passed options
                settings = $.extend({
                    className: 'hasPlaceholder',
                    element: '<div class="placeholder"/>',
                    hide: function (ph) {
                        ph.detach();
                    },
                    show: function (ph) {
                        var input = $(this);
                        ph.text(input.attr('placeholder'));
                        ph.css('width', input.width());
                        ph.insertBefore(this);
                    },
                    wrapIn: null
                }, options);

                // Make placeholders for every input
                return this.each(function () {
                    var input, placeholder;

                    input = $(this);

                    // If already configured, exit
                    if (input.data(key)) return;

                    // Create the placeholder element
                    placeholder = $(settings.element)
                    placeholder.bind('click focus', function () {
                        input.trigger('focus');
                    });

                    // Input element setup
                    input.addClass(settings.className).bind({
                        blur: function () {
                            if (!input.val()) {
                                settings.show.call(this, placeholder);
                            }
                        },
                        focus: function () {
                            settings.hide.call(this, placeholder);
                        }
                    });

                    // Wrap in wrapping element (if any)
                    if (settings.wrapIn) {
                        input.wrap(settings.wrapIn);
                    }

                    // Trigger a blur event to initialize 
                    input.trigger('blur');

                    // Store setup-done flag
                    input.data(key, true);
                });
            };
        }
    } ());
})(jQuery);

Sweet plugin! Works perfect!