[javascript] iPad Web App : Safari에서 JavaScript를 사용하여 가상 키보드 감지?

편집 : 실제로 작동하지는 않지만 Apple에서 문서화 : 키보드 표시를 통한 WKWebView 동작 : “iOS 10에서 WKWebView 객체는 키보드가 표시되고 호출되지 않는 경우 window.innerHeight 속성을 업데이트하여 Safari의 기본 동작과 일치합니다. 이벤트 크기 조정 “(아마도 크기 조정 대신 초점 또는 초점 + 지연을 사용하여 키보드 감지)

편집 : 코드는 외부 키보드가 아닌 화면 키보드를 가정합니다. 정보는 온 스크린 키보드에만 관심이있는 다른 사람에게 유용 할 수 있으므로 그대로 두십시오. 페이지 매개 변수를 보려면 http://jsbin.com/AbimiQup/4 를 사용하십시오 .

document.activeElement키보드가 입력 요소 인지 확인합니다 (입력 유형 = 텍스트, 텍스트 영역 등).

다음 코드는 우리의 목적을 위해 퍼지합니다 (일반적으로 정확하지는 않지만).

function getViewport() {
    if (window.visualViewport && /Android/.test(navigator.userAgent)) {
        // https://developers.google.com/web/updates/2017/09/visual-viewport-api    Note on desktop Chrome the viewport subtracts scrollbar widths so is not same as window.innerWidth/innerHeight
        return {
            left: visualViewport.pageLeft,
            top: visualViewport.pageTop,
            width: visualViewport.width,
            height: visualViewport.height
        };
    }
    var viewport = {
            left: window.pageXOffset,   // http://www.quirksmode.org/mobile/tableViewport.html
            top: window.pageYOffset,
            width: window.innerWidth || documentElement.clientWidth,
            height: window.innerHeight || documentElement.clientHeight
    };
    if (/iPod|iPhone|iPad/.test(navigator.platform) && isInput(document.activeElement)) {       // iOS *lies* about viewport size when keyboard is visible. See http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari Input focus/blur can indicate, also scrollTop: 
        return {
            left: viewport.left,
            top: viewport.top,
            width: viewport.width,
            height: viewport.height * (viewport.height > viewport.width ? 0.66 : 0.45)  // Fudge factor to allow for keyboard on iPad
        };
    }
    return viewport;
}


function isInput(el) {
    var tagName = el && el.tagName && el.tagName.toLowerCase();
    return (tagName == 'input' && el.type != 'button' && el.type != 'radio' && el.type != 'checkbox') || (tagName == 'textarea');
};

위의 코드는 대략적인 것입니다 : 스플릿 키보드, 도킹되지 않은 키보드, 물리적 키보드에는 잘못되었습니다. 상단의 주석에 따라 window.innerHeight속성을 사용하여 Safari (iOS8 이후) 또는 WKWebView (iOS10 이후)의 주어진 코드보다 더 나은 작업을 수행 할 수 있습니다 .

다른 상황에서 실패를 발견했습니다. 예 : 입력에 초점을 맞춘 다음 홈 화면으로 이동 한 다음 페이지로 돌아옵니다. iPad는 뷰포트를 작게 만들지 않아야합니다. 이전 IE 브라우저는 작동하지 않습니다. Opera는 키보드를 닫은 후에도 요소에 계속 집중했기 때문에 작동하지 않았습니다.

그러나 뷰포트를 확대 / 축소하거나 환경 설정에서 강제 확대를 사용하도록 설정 한 경우 태그가있는 답변 (높이를 측정하기 위해 스크롤 탑을 변경)에 UI 부작용이 발생합니다. iOS에서 뷰포트가 확대 가능하고 포커스 된 입력으로 스크롤 할 때 스크롤링 및 줌 및 포커스 사이에 버그가있는 상호 작용이 있기 때문에 다른 제안 된 솔루션 (스크롤 탑 변경)을 사용하지 않습니다. 명백한).

답변

$(window).bind "resize", (event) ->  alert "resize"