JSFiddle - React, Tailwind, and code Playground

Input Placeholder

by Jennifer Perrin

HTML

<form id="someform">
    <p>
        <label for="someinput">Enter value</label>
        <input type="text" class="with_placeholder" name="someinput" id="someinput"/>
    </p>
    <p>
        <label for="otherinput">Enter some other value</label>
        <input type="text" class="with_placeholder"  name="otherinput" id="otherinput"/>
    </p>
    
    <input type="submit" value="submit"/>
</form>

CSS

input.placeholder { color: #bbb; }

JavaScript

// doesn't clear the message in IE6 - help?

var InputPlaceholder = new Class({
    Implements: Options,
    options: {
        placeholderClass: 'placeholder'
    },
    initialize: function(element, options) {
        this.setOptions(options);
        this.element = $(element);
        var lbl = $$('label[for='+this.element.get('id')+']')[0];
        this.labelText = lbl.get('text');
        lbl.destroy();
        var self = this;
        var clear = function() {
            if (self.element.get('value') === self.labelText) {
                self.element.set('value', '');
                self.element.removeClass(self.options.placeholderClass);
            }
        };
        var set = function() {
            if (!self.element.get('value')) {
                self.element.set('value', self.labelText);
                self.element.addClass(self.options.placeholderClass);
            }
        };
        this.element.addEvents({
            focus: clear,
            blur: set
        });
        var form = this.element.getParent('form');
        if (form) form.addEvent('submit', clear);
        set();
    }
});

window.addEvent('domready', function() {
    $$('.with_placeholder').each(function(inp) { 
        new InputPlaceholder(inp);
    });
    $('someform').addEvent('submit', function(e) {
        e.stop();
        alert($('someinput').get('value'));
    });
});