Persistent Placeholder

This is a demo of how to setup your own persistent placeholders, i.e., placeholders that you can still see after clicking into a text input, but they disappear once you enter text.

by shapeshifta

HTML

<h1>Persistent Placeholders Demo</h1>

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" class="text" type="text" name="username">
</div>
<br>

<div class="input-wrapper">
    <label for="id_password">Password</label>
    <input id="id_password" class="text" type="password" name="password">
</div>

<br><br>
<p>
    The placeholders will still appear after you focus on the form elements. However, once you add text, they will dissappear. This even works on password fields.
</p>
<br>

<p>
    The placeholder-like text is an absolutely positioned label, which affords for extremely simple and easy-to-read markup.
</p>
<br>

<div class="input-wrapper">
    <label>First name</label>
    <input class="text" type="text" name="first_name">
</div>

<div class="input-wrapper">
    <label>Last name</label>
    <input class="text" type="text" name="last_name" value="Pre-filled">
</div>
<br>

<div class="input-wrapper">
    <label>About you…</label>
    <textarea name="details"></textarea>
</div>

CSS

/*
 * This top section is just some preperational stuff,
 * jump down to `input wrapper` to see the important CSS
 */


/** type */

body { padding: 18px 20px; }

body, input, textarea, select, button {
    font: normal 13px/18px helvetica, arial, hirakakupro-w3, osaka, "ms pgothic", sans-serif;
    color: #333;
}

h1 { font-size: 15px; font-weight: bold; margin-bottom: 18px; }

/* **/

/** base input CSS */

input.text,
textarea {
    position: relative;
    display: -moz-inline-box; /* ff2 */
    display: inline-block;
    *display: inline; /* ie6&7 */
    zoom: 1;
    margin: 4px 0;
    border: 1px solid #bbb;
    padding: 5px 7px;
    font-size: 15px;
    vertical-align: top;
    -khtml-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -khtml-appearance: none;
    -moz-appearance: none;
}

textarea {
    height: 90px;
    width: 200px;
}

input.text {
    height: 16px;
    line-height: 16px;
}

input.text:-moz-first-node { /* ff hack - fix jacked line heights */
    padding-top: 6px;
    padding-bottom: 4px;
}

/* **/

/** input wrapper */

.input-wrapper {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    *display: inline; /* ie6&7 */
    zoom: 1;
    margin: 4px 0;
    border: 1px solid #bbb;
    background: #fff;
    line-height: 18px;
    vertical-align: middle;
}

.input-wrapper input.text,
.input-wrapper textarea {
    z-index: 2;
    margin: 0;
    border: 0;
    background: transparent;
    *background: url(http://hunch.com/media/img/t.png); /* ie7 does weird stuff with transparent background, also please don't deep link to this image from your code */
}

.input-wrapper label {
    z-index: 1;
    position: absolute;
    height: 16px;
    padding: 5px 7px;
    font-size: 15px;
    line-height: 16px;
    color: #999;
    overflow: hidden;
}

.input-wrapper.focus label {
    filter:alpha(opacity=50);
    opacity:...

JavaScript

/*
 * Persistent Placeholder - treats a label like a placeholder and
 * makes it persist even when you focus on an input. Huzzah!
 */
(function($) {

    var parentSelector = '.input-wrapper',
        inputSelectors = [parentSelector + '>input.text', parentSelector + '>textarea'],
        len = inputSelectors.length,
        i;

    function update(force) {
        var $input = $(this),
            $parent = $input.parent(parentSelector);
        return $parent[force === true || $input.val() ? 'addClass' : 'removeClass']('filled');
    }

    function focus() {
        update.call(this).addClass('focus');
    }

    function blur() {
        update.call(this).removeClass('focus');
    }

    function keydown(evt) {
        var c = evt.keyCode;
        ((47 < c && c < 91) || (95 < c && c < 112) || (185 < c && c < 223)) && update.call(this, true);
    }

    $.fn.prepareInput = function() {
        return this.each(update);
    };

    for (i = 0; i < len; i++) {
        $(inputSelectors[i]).live('focus', focus).live('blur', blur).live('keyup', update).live('click', update).live('keydown', keydown);
    }

    $(function() {
        for (i = 0; i < len; i++) {
            $(inputSelectors[i]).prepareInput();
        }
    });

})(jQuery);