infieldLabel

A jQuery plugin to make infield form labels suck less.

HTML

<div class="infield-label">
        <label for="fname">First Name</label>
        <input type="text" name="fname" id="fname" class="input" size="50">
    </div>
 <br/>
    <div class="infield-label">
        <label for="lname">Last Name</label>
        <input type="text" name="lname" id="lname" class="input" size="50">
    </div>
  <br/>
    <div class="infield-label">
        <label for="ll">Last Name</label>
        <input type="text" name="lname" id="ll" class="input" size="50">
    </div>

CSS

/* basic html styling */
 body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 70px 0 0 50px;
}

p {
    margin: 0 0 20px;
}

/* input styling */
 .input {
    background: #fff;
    border: 1px solid #c4c4c4;
    color: black;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 38px;
    margin: 0;
    outline: none;
    padding: 0 10px;
}

.lt-ie9 .input {
    line-height: 38px;
}

.input:focus {
    border-color: #08c;
    -webkit-box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
       -moz-box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
            box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
}

/* infieldLabel styles */
 .infield-label {
    display: block;
    position: relative;
}

.infield-label label {
    bottom: 0;
    color: black;
    display: block;
    left: 0;
    line-height: 39px;
    margin: 0;
    right: 0;
    top: 0;
}

/* normally hidden behind .js class on body */
 .infield-label label {
     
    font-size: 14px;
    padding: 0 10px;
    position: absolute;
    white-space: nowrap;
}

.placeholder-focus label {

    bottom: auto;
    color: black;
    line-height: 32px;
    right: auto;
    top: -25px;
}

.no-rgba .placeholder-focus label {
    background-color: black;
}

.placeholder-focus label:after {
    border-top: 5px solid rgba(0, 0, 0, 0.8);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    content:'';
    display: block;
    height: 0;
    left: 10px;
    position: absolute;
}

.no-rgba .placeholder-focus label:after {
    border-top-color: #111;
}

.infield-label-image.placeholder-focus label {
    top: -122px;
}

.placeholder-hide label {
    bottom: auto;
    left: -9999px;
    right: auto;
    top: -9999px;
}

JavaScript

/*! jquery.infieldLabel.js v 1.0 | Author: Jeremy Fields [[email protected]], 2013 | License: MIT */

(function ($) {

    $.infieldLabel = function (el, options) {

        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("infieldLabel", base);

        // internal variables
        base.$input = null;

        base.init = function () {
            base.options = $.extend({}, $.infieldLabel.defaultOptions, options);

            base.setup();
        };


        // setup

        // first time input setup
        base.setup = function () {
            base.$input = base.$el.find("input[type=text], input[type=password]");

            // hide label if there's already a value
            base.blur();

            // bind events
            base.bind();
        };

        // binds the focus, blur and change events
        base.bind = function () {
            base.$input.on("focus.infield", function () {
                base.$el.removeClass(base.options.hideClass)
                    .addClass(base.options.focusClass);

            }).on("blur.infield change.infield", function () {
                base.blur();
            });
        };

        base.blur = function () {
            if (base.$input.val() !== "") {
                base.$el.removeClass(base.options.focusClass)
                    .addClass(base.options.hideClass);

            } else {
                base.$el.removeClass(base.options.focusClass + " " + base.options.hideClass);
            }
        };

        // run initializer
        base.init();
    };

    $.infieldLabel.defaultOptions = {
        focusClass: "placeholder-focus",
        hideClass: "placeholder-hide"
    };

    $.fn.infieldLabel = function...