22. (jquery/제이쿼리) focus , blur 사용해 input text 포커스 상태 확인 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>       




    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. $("#객체") : jquery 에서 특정 객체 아이디 값을 지정합니다
    	3. focus : 특정 객체의 포커스 이벤트를 감지합니다
    	4. blur : 특정 객체가 focus >> unfocus 된 상태를 감지합니다
    	*/


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");

    		// input text 객체 아이디 설정
    		var input = $("#input_box");

    		// focus 및 blur 이벤트 등록 실시
    		input.focus(function (){
    			console.log("");
    			console.log("[window onload] : [input] : [focus]");
    			console.log("");
    		});


    		input.blur(function (){
    			console.log("");
    			console.log("[window onload] : [input] : [blur]");
    			console.log("");
    		});
    	};
    	
    </script>




    <!-- input text 객체 등록 -->
    <input id="input_box" type="text" name="input_box" value="" placeholder="텍스트를 입력하세요">	

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. $("#객체") : jquery 에서 특정 객체 아이디 값을 지정합니다

3. focus : 특정 객체의 포커스 이벤트를 감지합니다

4. blur : 특정 객체가 focus >> unfocus 된 상태를 감지합니다

*/

/* =========================== */