이벤트 핸들러에 따라 변경되는 동적 레이블

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> 

그리고 내 자바 스크립트

<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> 

다른 뭔가가 필요한 경우 알려줘되어 다음과 같은 추가했다.

EDIT : 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]); 
     } 

}