■ 모바일 웹 키보드 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)에서 키보드 이벤트 체크
준비중
