HTML5, CSS3 & JS Experiments

By Martin Ivanov

Placeholder Enabler

Demo

Register the Class

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script src="html5-placeholder-enabler/html5-placeholder-enabler.js"></script>
<script src="html5-placeholder-enabler/Example.js"></script>

Usage and Code Insight

YUI().use("html5-placeholder-enabler", function (Y) {
    var placeholder = new Y.HTML5.Placeholder();
    placeholder.enable();
});
/*
 * Placeholder
 * JavaScript enabler for HTML5 Placeholders
 * developer's website: http://wemakesites.net/#!/web-dev
 * developer's twitter: https://twitter.com/#!/wemakesitesnet
 * developer's blog http://acidmartin.wordpress.com/
 **/
YUI.add("html5-placeholder-enabler", function(Y) {
    "use strict";

	function Placeholder() {
		Placeholder.superclass.constructor.apply(this, arguments);
    }
    
    Y.extend(Placeholder, Y.Base, {
        enable: function() {
            var 
                textarea = document.createElement("textarea");
            
            if(undefined === textarea.placeholder) {
                this._bind();
            }
        },
        
        _bind: function(){
            var 
                inputs = Y.all("input"),
                textareas = Y.all("textarea"),
                enabledcss = "placeholder-enabler",
                placeholderattr = "data-placeholder",
                _set = function(element, state) {
                    switch(state){
                        case true:
                            element.set("value", element.getAttribute("placeholder"));
                            element.addClass(enabledcss);
                            break;
                        case false:
                            element.set("value", "");
                            element.removeClass(enabledcss);
                            break;
                    }
                },
                _enable = function(e) {
                    var 
                        element = e.currentTarget,
                        type = e.type;
                    
                    switch(type){
                        case "focus":
                            if(element.get("value") === element.getAttribute("placeholder")) {
                                _set(element, false);
                            }
                            break;
                        case "blur":
                            if(element.get("value") === "") {
                                _set(element, true);
                            }
                            break;
                    }
                },
                _type = function(element) {
                    return element.get("type");
                },
                _bind = function(element) {
                    if(element.hasAttribute(placeholderattr)){
                        return;
                    }
                    _set(element, true);
                    element.on("focus", _enable);
                    element.on("blur", _enable);
                    element.setAttribute(placeholderattr, true);
                };
                
            inputs.each(function() {
                if(_type(this) !== "text" && _type(this) !== "password") {
                    return;
                }
                _bind(this);
            });
            textareas.each(function() {
                _bind(this);
            });
        }
    });
    Y.namespace("HTML5").Placeholder = Placeholder;
}, "0.0.1", {
    requires: ["base", "event"]
});