0 Replies - 1092 Views - Last Post: 17 September 2011 - 09:56 PM

#1 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4238
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Make the HTML5 input placeholder attribute cross-browser compatible.

Posted 17 September 2011 - 09:56 PM

Description: Include the code into the of your HTML, and it will take care of everything automatically. To add placeholders to additional input elements, use the "Placeholder.Add()" function.Allows you to use the HTML5 attributes on browsers that do not support it. Also makes it easy to add placeholders to input elements without them.
/**
 * This object makes the HTML5  attribute cross-browser
 * compatible, allowing any page that includes this in the  section
 * to use it, regardless of browser. No calls to it or initialization is
 * required.
 * 
 * Also enables the ability to add placeholders to input elements without
 * the use of the attribute, by simply calling the "Add" method of the global
 * "Placeholder" object. (See details below, in the function's docblock.)
 */
var Placeholder = (function() 
{
    /** The color of the placeholder text. */
    var placeholderColor = "#A0A0A0";
    
    /** The color of normal text values. */
    var normalColor = "#000000";
    
    /**
     * Cross browser compatible addEventListener function. Parameters mimic the
     * standard version, with the added elem param.
     */
    var xAddEventListener = function(elem, type, listener, useCapture) {
        if (elem.addEventListener)
            elem.addEventListener(type, listener, useCapture);
        else if (elem.attachEvent)
            elem.attachEvent("on" + type, listener);
        else
            elem["on" + type] = listener;
    }
    
    /**
     * A boolean indiciating the browser support for the
     * placeholder attribute. 
     */
    this.native_support = (function() {
        var input = document.createElement("input");
        return "placeholder" in input;
    })();
    
    /**
     * Adds a placeholder value on the specified input. Note that this does not
     * check if native placholder support is available, allowing you to add
     * Javascript placeholders regardless of browser support.
     * @param input The input element, or the ID of the input element.
     * @param placeholder The string to use as the placeholder value.
     */
    this.Add = function(input, placeholder) {
        if (typeof input == "string") {
            input = document.getElementById(input);
        }

        // Add the blur and focus events
        xAddEventListener(input, "focus", function() {
            if (input.value == placeholder) {
                input.value = "";
                input.style.color = normalColor;
            }
        }, true);
        var onblur = function() {
            if (input.value == "" || input.value == placeholder) {
                input.value = placeholder;
                input.style.color = placeholderColor;
            }
        }
        xAddEventListener(input, "blur", onblur, true);
        
        // Make sure the placeholder value isn't sent with the form.
        var pform = input;
        do {
            pform = pform.parentNode;
        } while (pform != document && pform.tagName.toLowerCase() != "form");
        
        if (pform && pform != document) {
            xAddEventListener(pform, "submit", function() {
                if (input.value == placeholder) {
                    input.value = "";
                }
            }, true);
        }
        
        // Set the initial state of the input, showing the placeholder.
        onblur();
    }
    
    /* Enables the placeholder values set on input elements  
     * in browsers that do not support it. */
    var onReady = function() {
        if (!Placeholder.native_support) {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; ++i) {
                if (inputs[i] && inputs[i].tagName.toLowerCase() == "input") {
                    var attr = inputs[i].getAttribute("placeholder");
                    if (typeof attr == "string" && attr.length > 0) {
                        Placeholder.Add(inputs[i], attr);
                    }
                }
            }
        }
    };

    // Prefer the DOMContentLoaded event if available, but fall back on the
    // load event for old or HTML5 non-compliant browsers.
    var readyHasFired = false;
    xAddEventListener(window, "DOMContentLoaded", function() {
        readyHasFired = true;
        onReady();
    }, true);
    xAddEventListener(window, "load", function() {
        if (!readyHasFired) {
            onReady();
        }
    }, true);
    
    return this;
})();



Is This A Good Question/Topic? 0
  • +

Replies To: Make the HTML5 input placeholder attribute cross-browser compatible.

#2 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4238
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Make the HTML5 input placeholder attribute cross-browser compatible.

Posted 17 September 2011 - 09:56 PM

Description: Include the code into the head of your HTML, and it will take care of everything automatically. To add placeholders to additional input elements, use the "Placeholder.Add()" function.Allows you to use the HTML5 placeholder attribute on browsers that do not support it. Also makes it easy to add placeholders to input elements without them.
/**
 * This object makes the HTML5  attribute cross-browser
 * compatible, allowing any page that includes this in the  section
 * to use it, regardless of browser. No calls to it or initialization is
 * required.
 * 
 * Also enables the ability to add placeholders to input elements without
 * the use of the attribute, by simply calling the "Add" method of the global
 * "Placeholder" object. (See details below, in the function's docblock.)
 */
var Placeholder = (function() 
{
    /** The color of the placeholder text. */
    var placeholderColor = "#A0A0A0";
    
    /** The color of normal text values. */
    var normalColor = "#000000";
    
    /**
     * Cross browser compatible addEventListener function. Parameters mimic the
     * standard version, with the added elem param.
     */
    var xAddEventListener = function(elem, type, listener, useCapture) {
        if (elem.addEventListener)
            elem.addEventListener(type, listener, useCapture);
        else if (elem.attachEvent)
            elem.attachEvent("on" + type, listener);
        else
            elem["on" + type] = listener;
    }
    
    /**
     * A boolean indiciating the browser support for the
     * placeholder attribute. 
     */
    this.native_support = (function() {
        var input = document.createElement("input");
        return "placeholder" in input;
    })();
    
    /**
     * Adds a placeholder value on the specified input. Note that this does not
     * check if native placholder support is available, allowing you to add
     * Javascript placeholders regardless of browser support.
     * @param input The input element, or the ID of the input element.
     * @param placeholder The string to use as the placeholder value.
     */
    this.Add = function(input, placeholder) {
        if (typeof input == "string") {
            input = document.getElementById(input);
        }

        // Add the blur and focus events
        xAddEventListener(input, "focus", function() {
            if (input.value == placeholder) {
                input.value = "";
                input.style.color = normalColor;
            }
        }, true);
        var onblur = function() {
            if (input.value == "" || input.value == placeholder) {
                input.value = placeholder;
                input.style.color = placeholderColor;
            }
        }
        xAddEventListener(input, "blur", onblur, true);
        
        // Make sure the placeholder value isn't sent with the form.
        var pform = input;
        do {
            pform = pform.parentNode;
        } while (pform != document && pform.tagName.toLowerCase() != "form");
        
        if (pform && pform != document) {
            xAddEventListener(pform, "submit", function() {
                if (input.value == placeholder) {
                    input.value = "";
                }
            }, true);
        }
        
        // Set the initial state of the input, showing the placeholder.
        onblur();
    }
    
    /* Enables the placeholder values set on input elements  
     * in browsers that do not support it. */
    var onReady = function() {
        if (!Placeholder.native_support) {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; ++i) {
                if (inputs[i] && inputs[i].tagName.toLowerCase() == "input") {
                    var attr = inputs[i].getAttribute("placeholder");
                    if (typeof attr == "string" && attr.length > 0) {
                        Placeholder.Add(inputs[i], attr);
                    }
                }
            }
        }
    };

    // Prefer the DOMContentLoaded event if available, but fall back on the
    // load event for old or HTML5 non-compliant browsers.
    var readyHasFired = false;
    xAddEventListener(window, "DOMContentLoaded", function() {
        readyHasFired = true;
        onReady();
    }, true);
    xAddEventListener(window, "load", function() {
        if (!readyHasFired) {
            onReady();
        }
    }, true);
    
    return this;
})();


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1