[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크

Posted at 2018. 11. 17. 13:14 | Posted in JavaScript & jQuery/jQuery



■ 모바일 웹 키보드 ON / OFF 여부 체크하기




#01. 안드로이드(Android)에서 키보드 이벤트 체크


# 소스코드

<html>
<head>
<title>:: MOBILE 키보드 체크 ::</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/git/jquery.mobile-git.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script>
<script type="text/javascript">
  jQuery(window).load(function() {
     
      // 처음 시작시 화면의 사이즈 값을 가진다.
      var originalSize = jQuery(window).width() + jQuery(window).height();
     
      // 창의 사이즈 변화가 일어났을 경우 실행된다.
      jQuery(window).resize(function() {
         
        // 처음 사이즈와 현재 사이즈가 변경된 경우
        // 키보드가 올라온 경우
        if(jQuery(window).width() + jQuery(window).height() != originalSize) {
           
          alert("가상 키보드가 오픈 되었습니다."); 
        }
       
        // 처음 사이즈와 현재 사이즈가 동일한 경우
        // 키보드가 다시 내려간 경우
        else {
           
          alert("가상 키보드의 사용지 종료되었습니다.");
        }
      });
    });
</script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>:: MOBILE 키보드 체크 ::</h1>
    </div>
     <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput">ID</label>
            <input type="text" name="id_input" id="id_input"/>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput">Password</label>
            <input type="text" name="password_input" id="password_input"/>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <input type="submit" value="로그인"/>
            </div>
            <div class="ui-block-b">
                <input type="reset" value="로그아웃"/>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




# 출력결과

  키보드 오픈

  키보드 종료










#02. 아이폰(iOS)에서 키보드 이벤트 체크



준비중



Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기