Использование меток, таких как заполнитель HTML5

Это может показаться немного излишним для количества прослушивателей, которые я использовал, не стесняйтесь удалять все, что вы считаете ненужным, но я пытался использовать вашу HTML-структуру в том виде, в каком она у вас есть, и дать вам все желаемые эффекты. Он должен работать либо для <label>s for, совпадающего с <input>s id, либо для его <name> (при отсутствии совпадений id). Я всегда говорю, что лучше использовать идентификатор, чем имя. Я считаю, что этот JavaScript также должен работать во всех браузерах, кроме addEventListener, для которого вам понадобится прокладка для старых версий IE (дайте мне знать, если это не так в одном из сообщений об ошибке) .

Демо

var focusColor = "#D5D5D5", blurColor = "#B3B3B3";
function placeholder(fieldName) {
    var named = document.getElementsByName(fieldName), i;
    for (i = 0; i < named.length; ++i) { // loop over all elements with this name
        (function (n) { // catch in scope
            var labels = [], tmp, j, fn, focus, blur;
            if ('labels' in n && n.labels.length > 0) labels = n.labels; // if labels provided by browser use it
            else { // get labels from form, filter to ones we want
                tmp = n.form.getElementsByTagName('label');
                for (j = 0;j < tmp.length; ++j) {
                    if (tmp[j].htmlFor === fieldName) {
                        labels.push(tmp[j]);
                    }
                }
            }
            for (j = 0; j < labels.length; ++j) { // loop over each label
                (function (label) { // catch label in scope
                    fn = function () {
                        if (this.value === '') {
                            label.style.visibility = 'visible';
                        } else {
                            label.style.visibility = 'hidden';
                        }
                    };
                    focus = function () {
                        label.style.color = focusColor;
                    };
                    blur = function () {
                        label.style.color = blurColor;
                    };
                }(labels[j]));
                n.addEventListener('click', fn); // add to relevant listeners
                n.addEventListener('keydown', fn);
                n.addEventListener('keypress', fn);
                n.addEventListener('keyup', fn);
                n.addEventListener('focus', fn);
                n.addEventListener('focus', focus);
                n.addEventListener('blur', fn);
                n.addEventListener('blur', blur);
            }
        }(named[i]));
    }
};
placeholder("email"); // just pass the name attribute
placeholder("firstName");
placeholder("lastName");

http://jsfiddle.net/cCxjk/5/

var inputs = document.getElementsByTagName('input');
var old_ele = '';
var old_label ='';
function hide_label(ele){
    var id_of_input = ele.target.id;
    var label = document.getElementById(id_of_input + '-placeholder');

    if(ele.target == document.activeElement){
        label.style.display = 'none';    
    }
    if (old_ele.value == '' && old_ele != document.activeElement){
        old_label.style.display = 'inline';
    }
    old_ele = ele.target;
    old_label = label;
    }

for(var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener('click', hide_label);
}

Я укажу на пару вещей, вам нужно будет выяснить тот факт, что label находится внутри input, поэтому пользователи теперь не могут щелкнуть половину input и фактически получить input усиление focus.

Также я предполагаю, что вы хотите сделать это в IE (в противном случае я настоятельно рекомендую использовать заполнитель html5!), что означает, что вам нужно будет изменить ele.target на ele.srcElement.