An object-oriented shim for placeholder text. This requires the jQuery library.

placeholder.js

/*globals $, document */
/**
 * A simple shim for the placeholder attribute.
 */
if (typeof (document.createElement('input')).placeholder !== 'string') {

    $(function () {

        'use strict';

        /**
         * All forms that will have the plceholder fix applied to them.
         *
         * @type {jQuery}
         */
        var jQforms = $('form');

        /**
         * Handles the placeholder shim for individual elements.
         *
         * @constructor
         * @param {Element} element Input or textarea element being shimmed.
         * @property {Element} element Element being shimmed.
         * @property {string} defaultValue Placeholder text.
         */
        function Placeholder(element) {

            this.element      = element;
            this.defaultValue = $(element).attr('placeholder');

            this.addHandlers();

        }

        /**
         * Configuration values for this object.
         */
        Placeholder.config = {

            // Class used when placeholder text is visible.
            CSS_PLACEHOLDER: 'is-placeholder'

        };

        Placeholder.prototype = {

            /**
             * Adds event handlers to the element.
             */
            addHandlers: function () {

                var that  = this;

                $(that.element).on({

                    focus: function () {
                        that.clearDefault();
                    },
                    blur: function () {
                        that.addDefault();
                    }

                });

            },

            /**
             * Clears the placeholder text from the form.
             */
            clearDefault: function () {

                var jQelem    = $(this.element),
                    className = Placeholder.config.CSS_PLACEHOLDER;

                if (jQelem.val() === this.defaultValue &&
                        jQelem.hasClass(className)) {
                    jQelem.val('').removeClass(className);
                }

            },

            /**
             * Makes the placeholder text visible.
             */
            addDefault: function () {

                var jQelem    = $(this.element),
                    val       = jQelem.val(),
                    className = Placeholder.config.CSS_PLACEHOLDER;

                if (val === '' && !jQelem.hasClass(className)) {
                    jQelem.val(this.defaultValue).addClass(className);
                }

            }

        };

        /**
         * Handles any form that contains an element with a shimmed placeholder.
         *
         * @constructor
         * @param {Element} form Form element.
         * @property {Element} form Form element.
         */
        function Form(form) {

            this.form = form;

            this.findElements();
            this.addHandlers();

        }

        /**
         * Configuration values for this object.
         */
        Form.config = {

            // CSS selector for the elements that will need shimming.
            SEL_PLACEHOLDER: 'input[placeholder], textarea[placeholder]'

        };

        Form.prototype = {

            /**
             * Finds all elements that will need shimming and creates an
             * instance of Placeholder for each of them, storing them in the
             * places array.
             *
             * @property {Array} places Instances of Placeholder for each
             * shimmed element.
             */
            findElements: function () {

                var that   = this,
                    places = [];

                /**
                 * @this {Element} Element that matched the selector.
                 */
                $(Form.config.SEL_PLACEHOLDER, that.form).each(function () {
                    places.push(new Placeholder(this));
                });

                this.places = places;

            },

            /**
             * Adds event handlers to the form.
             */
            addHandlers: function () {

                var that = this;

                $(that.form).on('submit', function () {
                    that.clearDefaults();
                });

            },

            /**
             * Clears all default values from the shimmed elements.
             */
            clearDefaults: function () {

                /**
                 * @this {Placeholder} Placeholder instance.
                 */
                $.each(this.places, function () {
                    this.clearDefault();
                });

            },

            /**
             * Makes all placeholder text visible.
             */
            addDefaults: function () {

                /**
                 * @this {Placeholder} Placeholder instance.
                 */
                $.each(this.places, function () {
                    this.addDefault();
                });

            }

        };

        /**
         * Create the form instances and store them for future reference.
         *
         * @this {Element} Form element.
         */
        jQforms.each(function () {

            var form = new Form(this);

            form.addDefaults();
            $(this).data('form', form);

        });

        /**
         * Add a handlers to the "beforeunload" event to clear out any default
         * values, preventing them from remaining when the page is refreshed.
         * Bugfix: IE8 remembered the values but not the classes after a page
         * refresh.
         */
        $(window).on('beforeunload', function () {

            /**
             * @this {Element} Form element.
             */
            jQforms.each(function () {

                var form = $(this).data('form');

                form.clearDefaults();

            });

        });

    });

}