使用HTML5占位符等标签

Question

我正在尝试在我的html联系人表单中使用<label>元素，例如输入的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>小号工作为匹配<input>小号ID或者它<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，实际上有input增益focus。

另外我想你想在IE中做到这一点（否则我会强烈建议使用html5占位符！）这意味着你需要将ele.target更改为ele.srcElement。