JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Placeholders</title>
    </head>
    <body>
        <form id="f" method="get">
            <input id="foo" type="text" name="foo" placeholder="Some foo" value="">
            <input type="text" name="bah" value="">
            <input type="text" name="meh" placeholder="Le meh" value="Meh">
            <span id="content"></span>
        
            <ul>
                <li><a id="click" href="#">Change value of first input field</a></li>
                <li><a id="click-too" href="#">Add a new input field with a placeholder</a></li>
            </ul>
            
            <button type="submit">Ok</button>
        </form>        
    </body>
</html>

CSS

body {
    font-family: sans-serif;    
}

input.placeholder {
    color: #aaa;
}

JavaScript

YUI.add('foo-modernize', function(Y) {
    var PLACEHOLDER_CLASS = 'placeholder';

    var Modernize = function() {};
    
    var _addPlaceholder = function() {
        var value = this.get('value'),
            placeholder = this.getAttribute('placeholder');

        if (!value && placeholder) {
            this.set('value', placeholder);
            this.addClass(PLACEHOLDER_CLASS);
        }
    };

    var _removePlaceholder = function() {
        if (this.hasClass(PLACEHOLDER_CLASS)) {
            this.removeClass(PLACEHOLDER_CLASS);
            this.set('value', '');
        }
    };

    Modernize.prototype = {
        _modernizrs: {
            placeholder: function(root) {
                if (Y.Modernizr.input.placeholder) {
                    return;
                }

                var nodes = root ? root.all('input[placeholder]') : Y.all('input[placeholder]');

                nodes.each(_addPlaceholder);

                Y.on('blur', _addPlaceholder, nodes);
                Y.on('focus', _removePlaceholder, nodes);
                
                Y.on('submit', function(e) {
                    _removePlaceholder(e.target.all('input.' + PLACEHOLDER_CLASS));
                });
            }
        },
        
        /**
         * Does cool stuff.
         *
         * @param node
         * @param features
         */
        modernize: function(node, features) {
            var node = node || Y.one(Y.config.doc.body),
                features = features || ['placeholder'];
                
            Y.each(features, function(feature) {
                this._modernizrs[feature](node);
            }, this);
        },
        
        addPlaceholders: function(root) {
            if (Y.Modernizr.input.placeholder) {
                return;
            }

            var nodes = root ? root.all('input[placeholder]') : Y.all('input[placeholder]');
            
            nodes.each(_addPlaceholder);
        },
        
       ...