HTML 4 Simple Placeholder

by MrPolywhirl

HTML

<input type="text" name="text1" value="" />
<input type="text" name="text2" value="" />
<input type="text" name="text3" value="" />
<input type="text" name="text4" value="" />
<input type="text" name="text5" value="" />
<input type="text" name="text6" value="" />
<input type="text" name="text7" value="" />

CSS

input {
    display: block;
}

.prompt {
    color: #AAA;
    font-style: italic;
}

JavaScript

Array.prototype.contains = function(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}

Array.prototype.remove = function(value) {
    var idx = this.indexOf(value);
    if (idx > -1) {
        return this.splice(idx, 1);
    }
    return false;
}

function classList(el) {
    return el.className.split(' ');
}

function hasClass(el, className) {
    return el.className.indexOf(className) > -1;
}

function removeClass(el, className) {
    if (hasClass(el, className)) {
        var classNames = classList(el);
        classNames.remove(className);
        el.className = classNames.join(' ');
        return true;
    }
    return false;
}

function addClass(el, className) {    
    if (!hasClass(el, className)) {
        var classNames = classList(el);
        classNames.push(className);
        el.className = classNames.join(' ');
        return true;
    }
    return false;
}

var prompt = 'Type something here';

var textFields = document.querySelectorAll('input[name^="text"]');
var index = 0;

for (index = 0; index < textFields.length; ++index) {
    var textField = textFields[index];
    textField.addEventListener('focus', onFocusHandler);
    textField.addEventListener('blur', onBlurHandler);
    handlePrompt(textField);
}

function onFocusHandler() {
    handlePrompt(this);
}

function onBlurHandler() {
    handlePrompt(this);
}

function handlePrompt(el) {
    if (el.value == prompt) {
        el.value = '';
        removeClass(el, 'prompt');
    } else if (el.value == '') {
        el.value = prompt;
        addClass(el, 'prompt');
    }
}