[IOS/Iphone] iOS 에서 키패드 노출 시 하단에 고정시킨 버튼 움직이는 현상

[IOS/Iphone] iOS 에서 키패드 노출 시 하단에 고정시킨 버튼 움직이는 현상

발생 상황 

입력 필드가 있고 하단에 Fixed 된 버튼이 있는 경우,

입력 필드를 선택 시 IOS의 경우 하단으로 키보드가 활성화 되고, 

그러면서 하단에 Fixed 시킨 버튼의 위치가 계속 변경 되는 현상 

 

해결방안

- 키패드를 제외한 화면의 높이 값을 계산해서 1초 후 버튼의 위치 값 이동 

- 입력 필드에서 포커스 아웃 시에 이벤트 반대로 적용 

 

var timeoutID;
var onloadHeight = window.innerHeight;
$('input[type="text"').on('focusin', function() {
    var device = getMobileDevice(navigator.userAgent);
    var id = $(this).attr('id');
    if(id == 'custNm') {
        if(device.isiOS) {
            timeoutID = setTimeout(function() {
                var rect = document.body.getBoundingClientRect();
                var max = Math.max(window.innerHeight, onloadHeight);
                var btValue = max - window.visualViewport.height + rect.y;
                $('#button').addClass('fixed');
                $('#button').css('bottom', btValue + 'px');
                $('.test').text('bottom'+ btValue + 'px');
            }, 1000);
        } else {
            timeoutID = undefined;
            $('#button').addClass('fixed');
            $('#button').css('bottom', window.innerHeight - window.visualViewport.height + 'px');
        };
        $('body').addClass('scrFixed');
    }
});

$('input[type="text"').on('focusout', function() {
    var id = $(this).attr('id');
    if(id == 'custNm') {
        if(timeoutID !== undefined) {
            clearTimeout(timeoutID);
        };
        setTimeout(function() {
            $('#button').removeClass('fixed');
            $('#button').css('bottom', 0);
        }, 100);
        $('body').removeClass('scrFixed');
    }
});