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

Question

Я пытаюсь использовать <label> элементов в моей форме контакта html, такой как атрибут заполнителя HTML5 для ввода. Я написал следующий JavaScript, чтобы действовать как функция многократного использования, которая обеспечит следующие функции.

1. Найти данные по названию.
2. Получите значение ввода.
3. Найдите ярлык, принадлежащий входу.
4. Изменение стиля этикетки в зависимости от состояния входа.
5. Изменение стиля этикетки в зависимости от значения ввода.

Однако он не работает, и я не знаю, почему, поскольку на консоли не появляются ошибки. Что я делаю не так? here is a JS Fiddle with code

function placeholder(field_name) { 

    // Get the input box with field_name 
    // Then get input value 
    var box = document.getElementsByName(field_name); 
    var i; 
    for (i = 0; i < box.length; i++) { 
     var value = document.getElementById(box[i].value); 
    } 

    // Get the labels belonging to each box using the HTML for attribute 
    var labels = document.getElementsByTagName('LABEL'); 
    for (i = 0; i < labels.length; i++) { 
     if (labels[i].htmlFor !== '') { 
      var elem = document.getElementById(labels[i].htmlFor); 
      if (elem) { 
       box.label = labels[i]; 
      } 
     } 
    } 

    // Colors 
    var focusColor = "#D5D5D5"; 
    var blurColor = "#B3B3B3"; 

    // If no text is in the box then show the label grey color 
    box.onblur = function() { 
     box.label.style.color = blurColor; 
    }; 

    // If input focuses change label color to light grey 
    box.onfocus = function() { 
     box.label.style.color = focusColor; 
    }; 

    // If there is text in the box then hide the label 
    if (box.value !== "") { 
     // Quick do something, hide! 
     box.label.style.color = "transparent"; 
    } 
} 

// Call the function passing field names as parameters 
placeholder(document.getElementsByName("email")); 
placeholder(document.getElementsByName("firstName")); 
placeholder(document.getElementsByName("lastName")); 

Answer 1

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

Demo

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"); 

Answer 2

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 и фактически имеют выигрыш inputfocus.

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