CSS/Javascript (Mootools I think) Label placer

Question

I've been asked to place a form on our website, simple you might think, but this one has some cool little js in place to make the label for the input sit inside it, clever but for some reason not working as intended on my page.

It doesn't place the label inside the Input field. It uses the JS to place the label and CSS for the color changes and such.

Here is a jsFiddle example .

And here is the live example .

Thanks anyone for any help :)

Answer 1

although you can do it, this is not ideal. there's a perfectly valid way forward via a HTML5 input improvement known as 'placeholder'.

a while back I wrote a placeholder="" class for mootools that is basically, a progressive enhancement for browsers that lack HTML5 placeholder capabilities (at the time of writing, anything that's not webkit)

http://fragged.org/mooplaceholder-input-placeholder-behaviour-class_1081.html

the fiddle: http://jsfiddle.net/hFtNd/1/

the class itself:

var mooPlaceholder = new Class({
    // behaviour for default values of inputs class
    Implements: [Options],

    options: {
        // default options
        htmlPlaceholder: "placeholder", // the element attribute, eg, data-placeholder="MM/YY" -> "data-placeholder"
        unmoddedClass: "unchanged", // apply a class to the unmodded input, say, to grey it out
        parentNode: document, // limit to a particular set of child nodes
        defaultSelector: "input[placeholder]"
    },

    initialize: function(options) {
        this.setOptions(options);
        this.nativeSupport = 'placeholder' in document.createElement('input');
    },

    attachToElements: function(selector) {
        // basic function example that uses a class selector to
        var inputs = this.options.parentNode.getElements(selector || this.options.defaultSelector);

        if (inputs.length) {
            inputs.each(function(el) {
                this.attachEvents(el);
            }, this);
        }
    }, // end attachToElements

    attachEvents: function(el, placeholder) {
        // method that attaches the events to an input element.
        var placeholder = placeholder || el.get(this.options.htmlPlaceholder);
        if (this.nativeSupport || !$(el) || !placeholder || !placeholder.length)
            return;

        el.set("value", placeholder).store("placeholder", placeholder);

        // append unmodded class to input at start
        if (this.options.unmoddedClass)
            el.addClass(this.options.unmoddedClass);

        // now cater for the events
        el.addEvents({
            change: function() {
                // when value changes
                var value = el.get("value").trim(), placeholder = el.retrieve("placeholder");
                if (value != placeholder) {
                    // once it changes, remove this check and remove the unmoddedClass
                    el.removeClass(this.options.unmoddedClass).removeEvents("change");
                }
            }.bind(this),

            focus: function() {
                var value = el.get("value").trim(), placeholder = el.retrieve("placeholder");
                if (value == placeholder) {
                    el.set("value", "").removeClass(this.options.unmoddedClass);
                }
            }.bind(this),
            blur: function() {
                var value = el.get("value").trim(), placeholder = el.retrieve("placeholder");
                if (value == placeholder || value == "") {
                    el.set("value", placeholder).addClass(this.options.unmoddedClass);
                }
            }.bind(this)
        });
    }

});

new mooPlaceholder().attachToElements();

and to style, you can just use the html5 classes (vendor specific atm):

::-webkit-input-placeholder {
  color: red;
  font-weight: bold;
}

so it does not look like I am pimping my own class, have a look for similar solutions on the mootools forge, i know Oskar and Seanmonstar did one ( http://demo.mootools.net/forge/p/mootools_placeholder - check github for their forks) and Thierry Bela did one ( http://mootools.net/forge/p/placeholder ) and there's the Apple placeholder ( http://demo.mootools.net/forge/p/apple_placeholder )

either way, do it the right way that will be most compatible and with longevity in mind (with feature detection, your javascript does not need to do anything which is ideal)