동작원리
모바일 기기상에서 input에 focus가 발생하면서, 가상키보드가 나타나게 되면, window의 크기 변화도 수반한다. 그렇다면 window width와 height의 비율을 통해서 가상키보드 등장 여부를 알아낼 수 있게 된다.
코드
이 코드는 작동되는 코드를 기초로 간략화한 버전이므로 안 될 수도 있다. 초기 진입시에 window.orientation이 undefined이기 때문에 초기 설정상 넣어준다.
componentDidMount: function() {
$(window).trigger('orientationchange');
},
이제는 가상키보드가 나타나는 것 뿐만이 아니라 orientation change등 모든 윈도우 변화에 state가 변하게 된다. 우리가 여기에서 알아내고 싶은 것은 가상키보드 등장에 의한 크게 변화만 인식(하여 무시)하고 싶을 뿐이다.
shouldComponentUpdate : function(){
if(window.orientation!==undefined){
var ratio = window.innerWidth / window.innerHeight;
if(window.orientation===0 || window.orientation===180){
// portrait
if(ratio > 1)
return false;
}else{
// landscape
if(ratio > 2.5)
return false;
}
}
return true;
}
orientaion의 상태에 따라 일반적으로 가지는 비율과, 가상키보드가 튀어나와서 변하는 비율을 인지하여, 컴포넌트 업데이트를 중단시켜주는 코드이다. 비교의 기준값인 1과 2.5는 그냥 대충 계산한 것이다. 각 기기와 브라우저마다 약간의 차이가 있을 텐데, 이는 실제 서비스를 운영하면서 경험치를 기반으로 조금씩 적당한 값으로 업데이트할 예정이다. 뭐 어떻게든 되겠지.
※ 블루투스 키보드에서는 어떠한 영향이 있을지 모르겠다.
※ input이나 textarea에 focus되면서 가상키보드가 나타난 경우, focus가 유지되고 있으면 지속적으로 가상키보드 상태로 인지하여 컴포넌트 업데이트가 모두 생략될 수 있다. 이때에는 입력폼과 관련된 메서드에 아래와 focus를 날려주는 작업을 먼저 지정한다.
$(':focus').blur();
