使用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。