根據事件處理程序更改的動態標籤

Question

我有一個HTML代碼片段，它是有兩個輸入的表單的一部分。通過CSS我已經設法使與每個輸入相關聯的標籤位於相應的輸入內，以充當佔位符。

現在，有了一些標準的JS（我不害怕JQuery），我想捕獲用戶在輸入上做的事情（即在一個鼠標單擊或鍵盤按下）上並動態地改變外觀和感覺標籤。

http://jsfiddle.net/8nBAQ/2/

，我需要滿足的條件是：

1. 當輸入的用戶第一次點擊。標籤將顏色更改爲淺灰色。點擊後，如果用戶輸入一個字符，標籤將消失，而您剛剛按下的字符會被顯示。

2. 當用戶第一次點擊輸入。標籤將顏色更改爲淺灰色。點擊後，如果用戶點擊或遠離輸入標籤，標籤會將顏色改回原來的黑色狀態。

3. 在輸入幾個字符後，如果用戶決定通過按退格刪除每個字符直到沒有剩餘字符或用鼠標突出顯示整組字符並按下刪除鍵來刪除整個字符集鍵，標籤出現，但是呈淺灰色。

任何幫助你可以提供與JS將是偉大的！

感謝 -JaXL

Answer 1

這裏是我的解決方案。我增加了以下內容輸入的標籤和標籤

<label class="label-inside" for="input1" id="input1_label" title="Enter input 1">Input 1</label> 
    <ul class="form-input"> 
    <li> 
     <input type="text" id="input1" name="myInput1" value="" autocomplete="off" title="Enter Input 1" onblur="handleBlur(this, document.getElementById('input1_label'))" 
     onkeydown="handleFirstClick(event, this, document.getElementById('input1_label'))" 
     onkeyup="handleKey(this, document.getElementById('input1_label'))" /> 
    </li> 
    </ul> 

，這裏是我的JavaScript

<script> 


    function handleBlur(input, label) 
    { 
     if (!input.value || input.value.length == 0) 
     { 
      label.style.display = 'block'; 
      label.style.color = 'black'; 
      label.clickedBefore = false; 
     } 
    } 

    function handleFirstClick(e, input, label) 
    { 
     if (!label.clickedBefore) 
     { 
      label.clickedBefore = true; 
      e.preventDefault(); 
      label.style.color = 'red'; 
     } 

    } 

    function handleKey(input, label) 
    { 
     console.log("handling key up : " + input.value.length); 
     label.style.display = 'none'; 

     if (!input.value || input.value.length == 0) 
     { 
     label.style.display = 'block'; 
     label.style.color = 'red'; 
     }  
    } 
</script> 

讓我知道，如果需要別的東西。

編輯：添加代碼一次根據input_id添加所有處理程序。

window.onload = function(){ 

    console.log("windows loaded"); 
    var labels = {} 
    var all_labels = document.getElementsByTagName("label"); 
    for (var i = 0; i < all_labels.length; i++) 
    { 
     labels[all_labels[i].getAttribute("for")] = all_labels[i]; 
    } 


    function attachHandlers(input_id) 
    { 
     var input = document.getElementById(input_id); 
     var label = labels[input_id]; 
     input.onclick = function(e){handleFirstClick(e, input, label)}; 
     input.onkeyup = function(e){handleKey(input, label)}; 
     input.onblur = function(e){handleBlur(input, label)}; 
    } 

    var attachInput = ["input1"]; 
    for (var j =0; j <attachInput.length; j++) 
    { 
     attachHandlers(attachInput[j]); 
     } 

}