101. (TWOK/LOGIC) [Web] 자바스크립트 에서 모바일 ( android , ios ) 가상 키보드 활성 상태 확인 방법 - onresize , focus , blur

---

[로직 정리]

​

정리 로직 : Web

​

상태 : [Web] 자바스크립트 에서 모바일 ( android , ios ) 가상 키보드 활성 상태 확인 방법 - onresize , focus , blur

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

- 모바일 화면 기준 웹 프론트 제작 필요 (HTML , CSS , JS)

- 웹 화면에 표시할 input 태그 생성 필요 (body) : 

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

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[input tag 로직 설명] : [Android , Ios 모두 체크 가능]
// --------------------------------------------------------------------------------------

1. 자바스크립트에서 키보드 활성 상태 체크 플래그 변수값 전역 설정 

  >> var keyboardShowFlag = false;


2. 자바스크립트 window.onload 에서 input 태그 아이디 지정 수행

  >> const inputTag = document.getElementById("input_keyboard");


3. 모바일 가상 키보드 활성 및 비활성 상태를 체크하기 위한 focus , blur 이벤트 리스너 등록 수행

  >> window.onload 에 이벤트 등록 수행

    // -------------------------------------------------
    // [가상 키보드 활성 상태 감지]
    // -------------------------------------------------
    inputTag.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";
        }

    });


    // -------------------------------------------------
    // [가상 키보드 비활성 상태 감지]
    // -------------------------------------------------
    inputTag.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";

        }

    });

// --------------------------------------------------------------------------------------





// --------------------------------------------------------------------------------------
[window.onresize 로직 설명] : [Android 체크 가능]
// --------------------------------------------------------------------------------------

1. 자바스크립트 body 사이즈 높이 값을 저장하기 위한 전역 변수 선언

  >> var  bodyHeightOriginalSize = "";


2. 자바스크립트 window.onload 에서 가상 키보드 동작 전) 원본 body 사이즈 값 변수 저장 수행

    window.onload = function() {

      // [브라우저 초기 로드 시 가상 키보드 비활성 상태 인 Height 값 저장 실시]
      bodyHeightOriginalSize = document.body.clientHeight;
      
    };


3. 자바스크립트에 실시간 화면 사이즈 변경 감지 window.onresize 이벤트 등록 수행

    window.onresize = function() {
      
    };


4. window.onresize 실시간 화면 변경 상태 이벤트가 동작 되면 변경 된 body 높이 값 확인 및 접속한 클라이언트 종류 확인 수행

    window.onresize = function() {

      // [실시간 변경 된 Height 값 저장 실시]
      var bodyHeightChangeSize = document.body.clientHeight;


      // [접속 한 디바이스 확인 실시]
      var uagent = navigator.userAgent.toLowerCase();
      var android_agent = uagent.search("android");
      var iphone = uagent.search("iphone");
      var ipad = uagent.search("ipad");


      // [접속 한 디바이스가 안드로이드 인 경우]
      if (android_agent > -1) {
          
      }
      
    };


5. 접속한 클라이언 종류가 안드로이드 이고, 원본 body 사이즈 값과 실시간 변경 된 body 사이즈 값이 다른 경우 가상 키보드 활성 판단

    // [접속 한 디바이스가 안드로이드 인 경우]
    if (android_agent > -1) {

        if (bodyHeightOriginalSize == bodyHeightChangeSize){ // [원본 사이즈와 변화된 사이즈가 같은 경우 : 가상 키보드 비활성]

        }        
        else { // [원본 사이즈와 변화된 사이즈가 다른 경우 : 가상 키보드 활성 상태]

        }

    }

// --------------------------------------------------------------------------------------






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

[자바스크립트 input box 포커스 활성 및 비활성 , 가상 키보드 제어 처리]

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


[웹 프론트 keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법]

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

[자바스크립트 onresize 화면 크기 변환 감지 사용해 안드로이드 가상 키보드 활성 상태 체크 실시]

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


[자바스크립트 input box 에 focus 및 blur addEventListener 이벤트 등록 , 가상 키보드 활성 상태 확인]

https://blog.naver.com/kkh0977/223629289643

// --------------------------------------------------------------------------------------

---