362. (javaScript) [간단 소스] 자바스크립트 input box 에 focus 및 blur addEventListener 이벤트 등록 , 가상 키보드 활성 상태 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트)

- 사전 조건 : input 태그 생성 필요

  <input id="input_keyboard" type="text" name="input_keyboard" value="" class="pTagContentMiddleClass" placeholder="가상 키보드 활성 상태 확인 (클릭)" style="width: 100%; height: 100%; color : #0000ff;"/>

- 사전 조건 : window.onload 페이지 로드 완료 상태 이벤트 등록 필요

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

// [전역 변수 선언]
var keyboardShowFlag = false;

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

    // -------------------------------------------------
    // [가상 키보드 활성 상태 감지]
    // -------------------------------------------------
    document.getElementById("input_keyboard").addEventListener("focus" , function(e) {
        console.log("");
        console.log("=========================================");
        console.log("[window onload] : [input_keyboard] : [focus]");
        console.log("----------------------------------------");
        console.log("keyboardShowFlag :: " + String(keyboardShowFlag));
        console.log("=========================================");
        console.log(""); 

        if (keyboardShowFlag == false){
            keyboardShowFlag = true;

            // [텍스트 변경]
            document.getElementById('p_keyboard').innerText = "가상 키보드 활성 상태";
            document.getElementById('p_keyboard').style.color = "#0000ff";
        }

    });


    // -------------------------------------------------
    // [가상 키보드 비활성 상태 감지]
    // -------------------------------------------------
    document.getElementById("input_keyboard").addEventListener("blur" , function(e) {
        console.log("");
        console.log("=========================================");
        console.log("[window onload] : [input_keyboard] : [blur]");
        console.log("----------------------------------------");
        console.log("keyboardShowFlag :: " + String(keyboardShowFlag));
        console.log("=========================================");
        console.log(""); 

        if (keyboardShowFlag == true){
            keyboardShowFlag = false;

            // [텍스트 변경]
            document.getElementById('p_keyboard').innerText = "가상 키보드 비활성 상태";
            document.getElementById('p_keyboard').style.color = "#ff0000";

        }

    });
    
};






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

https://blog.naver.com/kkh0977/222718499413?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

---