11/09 39-2 [JS] FocusEvent

포커스 관련 이벤트
        focus:포커스(커서)를 얻었을 발생하는 이벤트(리스너:onfocus)
        blur:포커스(커서)를 잃었을때 발생하는 이벤트(리스너:onblur)

 

받은 HTML문서

 <fieldset>
        <legend>focus 및 blur이벤트</legend>
        <input type="text" onfocus="console.log('focus이벤트 발생:포커스를 얻었을때')" onblur="console.log('blur이벤트 발생:포커스를 잃었을때')" />
    </fieldset>
    <fieldset>
        <legend>focus 및 blur이벤트 예제(HTML5의 속성 이용-IE에서만 적용됨)</legend>
        아이디 <input type="text" placeholder="아이디" />
        비밀번호 <input type="password" placeholder="비밀번호" />
    </fieldset>
    <fieldset>
        <legend>focus 및 blur이벤트 예제(자바스크립트로 구현)</legend>
        아이디 <input type="text" value="아이디" style="color:lightgray"  />
        비밀번호 <input type="text" value="비밀번호" id="txt" style="color:lightgray"/><input type="password" id="pwd" style="display:none"/>
    </fieldset>

 

새로생긴 CSS속성 중 placeholder가 없었을 땐 자바스크립트로 모두 구현 했어야 했다고 함

그걸 해볼 것임 

아...

내가만든 placeholder

window.addEventListener('DOMContentLoaded',function(){
	var username= document.querySelector('fieldset:nth-child(3)>[type=text]:nth-child(2)')
	console.log(username)

	//아이디처리
	username.onfocus=function(){  //입력 시 처리
		if(this.value === '아이디'){
		this.value='';
    	this.style.color='black';
 		}
	};
    
    username.onblur=function(){   //입력 없고 포커스 잃었을 때
    	if(this.value.trim().length==0){
        this.value='아이디';
        this.sytle.color='lightgray';
        }
    };



   //비밀번호 처리
  		var txt = document.querySelector('#txt');
        var pwd = document.querySelector('#pwd');
         //type="text"에는 onfocus 리스너 부착
        txt.onfocus=function(){
            txt.style.display='none';
            pwd.style.display='';
            pwd.focus();
        };
          //type="password"에는 onblur 리스너 부착
        pwd.onblur = function(){
            if(pwd.value.trim()==''){
                pwd.style.display='none';
                txt.style.display='';
            }
        }

});

focus 및 blur이벤트

focus 및 blur이벤트 예제(HTML5의 속성 이용-IE에서만 적용됨)

아이디 비밀번호

focus 및 blur이벤트 예제(자바스크립트로 구현)

아이디 비밀번호