iOS 5 고정 위치 및 가상 키보드

position : fixed를 통해 화면 하단에 div가 고정 된 모바일 웹 사이트가 있습니다. 양식이있는 페이지에 올 때까지 iOS 5 (iPod Touch에서 테스트 중)에서 제대로 작동합니다. 입력 필드를 탭하고 가상 키보드가 나타나면 갑자기 내 div의 고정 위치가 손실됩니다. 키보드가 표시되어 있으면 div가 페이지와 함께 스크롤됩니다. 완료를 클릭하여 키보드를 닫으면 div가 화면 하단의 위치로 되돌아 가고 position : fixed 규칙을 따릅니다.

다른 사람이 이런 종류의 행동을 경험 한 적이 있습니까? 이것이 예상됩니까? 감사.

내 응용 프로그램 에서이 문제가있었습니다. 다음은 내가 어떻게 해결하고 있는지입니다.

input.on('focus', function(){
    header.css({position:'absolute'});
});
input.on('blur', function(){
    header.css({position:'fixed'});
});

상단으로 스크롤하여 거기에 배치하기 때문에 iOS 사용자는 이상한 일이 발생하지 않습니다. 다른 사용자가이 동작을 수행 할 수 없도록이를 일부 사용자 에이전트 감지로 랩하십시오.

가상 키보드가 뷰포트를 화면 밖으로 밀어 올리는 약간 다른 ipad 문제가있었습니다. 그런 다음 사용자가 가상 ​​키보드를 닫은 후에도 여전히 내 뷰포트가 화면을 벗어났습니다. 제 경우에는 다음과 같은 일을했습니다.

var el = document.getElementById('someInputElement');
function blurInput() {
    window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);

이것은 ipad의 문제를 해결하기 위해 사용하는 코드입니다. 기본적으로 오프셋과 스크롤 위치 간의 불일치를 감지하여 '고정'이 올바르게 작동하지 않음을 의미합니다.

$(window).bind('scroll', function () {
    var $nav = $(".navbar")
    var scrollTop = $(window).scrollTop();
    var offsetTop = $nav.offset().top;

    if (Math.abs(scrollTop - offsetTop) > 1) {
        $nav.css('position', 'absolute');
        setTimeout(function(){
            $nav.css('position', 'fixed');
        }, 1);
    }
});

위치 고정 요소는 키보드를 켰을 때 위치를 업데이트하지 않습니다. Safari가 페이지 크기가 조정되었다고 생각하도록 유도함으로써 요소의 위치가 변경됩니다. 완벽하지는 않지만 적어도 'position : absolute'로 전환하고 변경 내용을 추적하는 것에 대해 걱정할 필요가 없습니다.

다음 코드는 사용자가 키보드를 사용하고있을 때 (입력이 집중되어 있기 때문에) 청취하고 흐림이 들릴 때까지 스크롤 이벤트를 수신 한 다음 크기 조정 트릭을 수행합니다. 지금까지 나를 위해 잘 작동하는 것 같습니다.

    var needsScrollUpdate = false;
    $(document).scroll(function(){
        if(needsScrollUpdate) {
            setTimeout(function() {
                $("body").css("height", "+=1").css("height", "-=1");
            }, 0);
        }
    });
    $("input, textarea").live("focus", function(e) {
        needsScrollUpdate = true;
    });

    $("input, textarea").live("blur", function(e) {
        needsScrollUpdate = false;
    });

이 문제를 연구하는 동안 누군가 가이 스레드에서 발생하는 경우를 대비하여. 이 글이이 문제에 대한 나의 생각을 자극하는 데 도움이된다는 것을 알았습니다.

이것은 최근 프로젝트에서 이것을위한 나의 해결책이었습니다. "targetElem"의 값을 헤더를 나타내는 jQuery 선택기로 변경하면됩니다.

if(navigator.userAgent.match(/iPad/i) != null){

var iOSKeyboardFix = {
      targetElem: $('#fooSelector'),
      init: (function(){
        $("input, textarea").on("focus", function() {
          iOSKeyboardFix.bind();
        });
      })(),

      bind: function(){
            $(document).on('scroll', iOSKeyboardFix.react);  
                 iOSKeyboardFix.react();      
      },

      react: function(){

              var offsetX  = iOSKeyboardFix.targetElem.offset().top;
              var scrollX = $(window).scrollTop();
              var changeX = offsetX - scrollX; 

              iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});

              $('input, textarea').on('blur', iOSKeyboardFix.undo);

              $(document).on('touchstart', iOSKeyboardFix.undo);
      },

      undo: function(){

          iOSKeyboardFix.targetElem.removeAttr('style');
          document.activeElement.blur();
          $(document).off('scroll',iOSKeyboardFix.react);
          $(document).off('touchstart', iOSKeyboardFix.undo);
          $('input, textarea').off('blur', iOSKeyboardFix.undo);
      }
};

};

iOS가 스크롤하는 동안 DOM 조작을 중지하기 때문에 수정이 보류되는 데 약간의 지연이 있지만 트릭을 수행합니다 ...

이 버그에 대해 찾은 다른 답변 중 어느 것도 나를 위해 일하지 않았습니다. 페이지를 34px 뒤로 스크롤하여 모바일 사파리가 스크롤하는 양을 간단하게 수정했습니다. jquery로 :

$('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

이것은 분명히 모든 브라우저에서 적용되지만 iOS에서 중단되는 것을 방지합니다.

이 문제는 정말 성가신 일입니다.

위에서 언급 한 기술 중 일부를 결합하고 이것을 생각해 냈습니다.

$(document).on('focus', 'input, textarea', function() {
    $('.YOUR-FIXED-DIV').css('position', 'static');
});

$(document).on('blur', 'input, textarea', function() {
    setTimeout(function() {
        $('.YOUR-FIXED-DIV').css('position', 'fixed');
        $('body').css('height', '+=1').css('height', '-=1');
    }, 100);
});

두 개의 고정 탐색 표시 줄이 있습니다 (twitter 부트 스트랩을 사용하는 머리글과 바닥 글). 키보드가 작동하면 이상한 반응을 보였고 키보드가 작동하지 않으면 이상한 반응을 보였습니다.

이 시간 지정 / 지연 수정으로 작동합니다. 나는 여전히 결함을 발견하지만 가끔 고객에게 보여주기에 충분할 것 같습니다.

이것이 당신에게 효과가 있는지 알려주세요. 그렇지 않으면 우리는 다른 것을 찾을 수 있습니다. 감사.

iOS7과 동일한 문제가 발생했습니다. 하단 고정 요소가 내 시야를 제대로 어지럽히 지 않습니다.

이 메타 태그를 HTML에 추가하면 모두 작동하기 시작했습니다.

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height" >

차이를 만든 부분은 다음과 같습니다.

height=device-height

누군가에게 도움이되기를 바랍니다.

나는 Jory Cunningham대답을하고 그것을 개선했다 :

많은 경우에, 미쳐가는 것은 단지 하나의 요소가 아니라 여러 고정 위치 요소 targetElem이므로이 경우 "고정"하려는 모든 고정 요소를 가진 jQuery 객체가되어야합니다. Ho, 스크롤하면 iOS 키보드가 사라지는 것 같습니다 ...

말할 것도 없이이 AFTER 문서 DOM ready이벤트 나 닫기 </body>태그 직전에 사용해야합니다 .

(function(){
    var targetElem = $('.fixedElement'), // or more than one
        $doc       = $(document),
        offsetY, scrollY, changeY;

    if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
        return;

    $doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);

    function bind(){
        $(window).on('scroll.iOSKeyboardFix', react);
        react();
    }

    function react(){
        offsetY = targetElem.offset().top;
        scrollY = $(window).scrollTop();
        changeY = offsetY - scrollY;

        targetElem.css({'top':'-'+ changeY +'px'});

        // Instead of the above, I personally just do:
        // targetElem.css('opacity', 0);

        $doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
            .on('touchend.iOSKeyboardFix', unbind);
    }

    function unbind(){
        targetElem.removeAttr('style');
        document.activeElement.blur();

        $(window).off('scroll.iOSKeyboardFix');
        $doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
    }
})();

내 iOS에서만 실행하고 기본 키보드 스크롤 전후에 scollTop을 측정하고 setTimeout을 사용하여 기본 스크롤이 발생하도록 스크롤 오프셋을 올바르게 결정한다는 점을 제외하고 @NealJMD와 비슷한 솔루션이 있습니다.

var $window = $(window);
var initialScroll = $window.scrollTop();
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
  setTimeout(function () {
    $window.scrollTop($window.scrollTop() + (initialScroll - $window.scrollTop()));
  }, 0);
}

이 방법으로 Ipad 기본 레이아웃 내용을 고정 위치로 고정했습니다.

var mainHeight;
var main = $('.main');

// hack to detects the virtual keyboard close action and fix the layout bug of fixed elements not being re-flowed
function mainHeightChanged() {
    $('body').scrollTop(0);
}

window.setInterval(function () {
    if (mainHeight !== main.height())mainHeightChanged();
    mainHeight = main.height();
}, 100);

@ ds111과 비슷한 문제가있었습니다. 키보드로 웹 사이트를 밀었지만 키보드를 닫을 때 아래로 이동하지 않았습니다.

먼저 @ ds111 솔루션을 시도했지만 두 가지 input필드가 있습니다. 물론, 먼저 키보드가 사라지고 흐려짐이 발생합니다. input포커스가 한 입력에서 다른 입력으로 직접 전환되었을 때 두 번째 는 키보드 아래에있었습니다.

또한 전체 페이지의 크기가 ipad 크기이므로 "점프 업"이 충분하지 않았습니다. 그래서 나는 스크롤을 부드럽게 만들었습니다.

마지막으로 이벤트 리스너를 모든 입력, 심지어 현재 숨겨져있는 입력에 연결해야했습니다 live.

모두 함께 다음 자바 스크립트 스 니펫을 다음과 같이 설명 할 수 있습니다. 다음과 같은 블러 이벤트 리스너를 현재와 미래에 연결 input하고 textarea(= live) : 유예 기간 (= window.setTimeout(..., 10))을 기다린 다음 animate({scrollTop: 0}, ...)"키보드가없는 경우에만 정상 (= )으로 부드럽게 스크롤합니다. 표시 "(= if($('input:focus, textarea:focus').length == 0)).

$('input, textarea').live('blur', function(event) {
    window.setTimeout(function() {
        if($('input:focus, textarea:focus').length == 0) {
            $("html, body").animate({ scrollTop: 0 }, 400);
        }
    }, 10)
})

유예 기간 (=는 것을주의 10) 너무 짧거나 더 있지만 키보드가 여전히 표시되지 않을 수 있습니다 input또는이 textarea초점을 맞추고 있습니다. 물론 스크롤을 더 빠르게 또는 느리게하려면 기간 (= 400)을 조정할 수 있습니다

입력에서 포커스 및 블러 이벤트를 찾고, 이벤트가 발생할 때 고정 막대의 위치를 ​​선택적으로 변경하도록 스크롤하는이 해결 방법을 찾기 위해 실제로 열심히 노력했습니다. 이것은 방탄이며 모든 경우에 적용됩니다 (<>, 스크롤, 완료 버튼으로 탐색). 참고 id = "nav"는 고정 바닥 글 div입니다. 이것을 표준 js 또는 jquery로 쉽게 포팅 할 수 있습니다. 이것은 전동 공구를 사용하는 사람들을위한 dojo입니다. ;-)

define ([ "dojo / ready", "dojo / query",], function (ready, query) {

ready(function(){

    /* This addresses the dreaded "fixed footer floating when focusing inputs and keybard is shown" on iphone 
     * 
     */
    if(navigator.userAgent.match(/iPhone/i)){
        var allInputs = query('input,textarea,select');
        var d = document, navEl = "nav";
        allInputs.on('focus', function(el){
             d.getElementById(navEl).style.position = "static";
        });

        var fixFooter = function(){
            if(d.activeElement.tagName == "BODY"){
                d.getElementById(navEl).style.position = "fixed";
            }
        };
        allInputs.on('blur', fixFooter);
        var b = d.body;
        b.addEventListener("touchend", fixFooter );
    }

});

}); // 끝 정의

이것은 '올바른'것을 얻기 어려운 문제입니다. 입력 요소 포커스에서 바닥 글을 숨기고 흐리게 표시 할 수 있지만 iOS에서는 항상 신뢰할 수있는 것은 아닙니다. 너무 자주 (10 번에 한 번, 내 iPhone 4S에서) 포커스 이벤트가 실행되지 않는 것 같습니다 (또는 경쟁 조건이있을 수 있음). 바닥 글이 숨겨지지 않습니다.

많은 시행 착오 끝에이 흥미로운 해결책을 찾았습니다.

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

기본적으로 : JavaScript를 사용하여 장치의 창 높이를 결정한 다음 창의 높이가 10 픽셀 줄어들 때 바닥 글을 숨기려면 CSS 미디어 쿼리를 동적으로 작성하십시오. 키보드를 열면 브라우저 디스플레이 크기가 조정되므로 iOS에서는 절대 실패하지 않습니다. JavaScript가 아닌 CSS 엔진을 사용하기 때문에 훨씬 빠르고 원활합니다!

참고 : 'display : none'또는 'position : static'보다 'visibility : hidden'을 덜 글리치하게 사용했지만 마일리지가 다를 수 있습니다.

나를 위해 작동

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}

우리의 경우 이것은 사용자가 스크롤하자마자 스스로 고쳐질 것입니다. 이것은 우리가에 스크롤을 시뮬레이션하기 위해 사용하고 수정이다 그래서 blur어떤에서 input또는 textarea:

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

내 대답은 할 수 없다는 것입니다.

25 답변이 있지만 내 경우에는 작동하지 않습니다. 키보드가 켜져있을 때 Yahoo 및 다른 페이지가 고정 헤더를 숨기는 이유입니다. 그리고 Bing은 전체 페이지를 스크롤 할 수 없게합니다 (overflow-y : hidden).

위에서 논의한 사례는 다르며, 일부는 스크롤 할 때 문제가 있고, 일부는 초점 또는 흐림입니다. 일부에는 바닥 글 또는 머리글이 고정되어 있습니다. 각 조합을 테스트 할 수는 없지만 귀하의 경우에는 수행 할 수 없다는 것을 깨닫게 될 수 있습니다.

Github에서이 솔루션을 찾았습니다.

https://github.com/Simbul/baker/issues/504#issuecomment-12821392

스크롤 가능한 내용이 있는지 확인하십시오.

// put in your .js file
$(window).load(function(){
    window.scrollTo(0, 1);
});

// min-height set for scrollable content
<div id="wrap" style="min-height: 480px">
  // website goes here
</div>

검색 주소창은 추가 보너스로 접 힙니다.

누구든지 이것을 시도하고 싶을 때. 입력 필드가있는 고정 바닥 글에서 다음을 수행했습니다.

<script>
    $('document').ready(
        function() {
            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)
                  || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
                var windowHeight = $(window).height();
                var documentHeight = $(document).height();

                $('#notes').live('focus', function() {
                    if (documentHeight > windowHeight) {
                        $('#controlsContainer').css({
                            position : 'absolute'
                        });
                        $("html, body").animate({
                            scrollTop : $(document).height()
                        }, 1);
                    }
                });
                $('#notes').live('blur', function() {
                    $('#controlsContainer').css({
                        position : 'fixed'
                    });
                    $("html, body").animate({
                        scrollTop : 0
                    }, 1);
                });
            }
        });
</script>

나는 같은 문제가 있습니다. 그러나 나는 고정 위치가 지연되고 (적어도 나를 위해) 깨지지 않았다는 것을 깨달았다. 5-10 초 정도 기다렸다가 div가 화면 하단으로 다시 조정되는지 확인하십시오. 키보드가 열려있을 때 오류가 아니라 지연된 응답이라고 생각합니다.

이 스레드에서 모든 접근 방식을 시도했지만 도움이되지 않으면 더 악화되었습니다. 결국, 나는 강제로 장치가 초점을 풀도록 결정했습니다.

$(<selector to your input field>).focus(function(){
    var $this = $(this);
    if (<user agent target check>) {
        function removeFocus () {
            $(<selector to some different interactive element>).focus();
            $(window).off('resize', removeFocus);
        }
        $(window).on('resize', removeFocus);
    }
});

그리고 그것은 매력처럼 작동하고 끈적 끈적한 로그인 양식을 수정했습니다.

제발 참고 :

1. 위의 JS 코드는 단지 내 아이디어를 제시하기 위해이 코드를 실행하려면 각괄호 (<>)의 값을 상황에 적합한 값으로 바꾸십시오.
2. 이 코드는 jQuery v1.10.2

iOS 8.3에서 더 큰 부트 스트랩 모달이있는 HTML 페이지의 경우 여전히 큰 버그입니다. 위의 제안 된 솔루션 중 어느 것도 효과가 없었으며 키가 큰 모달의 접힌 부분 아래의 필드를 확대 한 후 Mobile Safari 및 / 또는 WkWebView는 고정 된 요소를 HTML 본문의 스크롤이있는 위치로 이동하여 실제로 위치 와 잘못 정렬되었습니다 . 배치했다.

버그를 해결하려면 다음과 같은 모달 입력에 이벤트 리스너를 추가하십시오.

$(select.modal).blur(function(){
  $('body').scrollTop(0);
});

HTML 본문의 스크롤 높이를 강제로 적용하면 iOS 8 WebView가 고정 모달 div의 내용이 예상되는 위치와 실제 뷰를 다시 정렬하기 때문에 이것이 효과가 있다고 생각합니다.

누군가가 완전히 다른 경로를 찾고 있다면 (스크롤 할 때이 "바닥 글"div를 고정하지 않고 div가 페이지의 맨 아래에 머무르기를 원하는 것처럼) 바닥 글 위치를 다음과 같이 설정할 수 있습니다. 상대적인.

즉, 가상 키보드가 모바일 브라우저에 표시 되더라도 바닥 글은 가상 키보드 표시 또는 닫기에 반응하지 않고 페이지의 맨 아래에 고정되어 있습니다.

위치가 고정되어 있고 위 또는 아래로 스크롤 할 때 바닥 글이 페이지를 따라 가면 Safari에서 더 잘 보입니다. 그러나 Chrome 의이 이상한 버그로 인해 바닥 글을 상대적으로 만들었습니다.

스크롤 솔루션 중 어느 것도 나를 위해 작동하지 않는 것 같습니다. 대신, 사용자가 텍스트를 편집하는 동안 본문의 위치를 ​​고정으로 설정 한 다음 사용자가 완료되면 고정 위치로 복원하는 것이 효과가있었습니다. 이것은 사파리가 당신의 내용을 스크롤하지 못하게합니다. 요소의 초점 / 흐리게하기 (단일 요소의 경우 아래에 표시되지만 모든 입력, 텍스트 영역 일 수 있음) 또는 사용자가 모달 열기와 같은 편집을 시작하는 경우이를 수행 할 수 있습니다. 해당 동작에 대해 (예 : 모달 열기 / 닫기).

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});

iOS9-같은 문제.

TLDR-문제의 원인. 해결책을 보려면 아래로 스크롤하십시오.

나는 형태가 있었다 position:fixedid = 'subscribe-popup-frame'인 iframe에

원래 질문에 따라 입력 초점에서 iframe은 화면 상단이 아닌 문서 상단으로 이동합니다.

사용자 에이전트가 idevice로 설정된 사파리 개발 모드에서도 동일한 문제가 발생하지 않았습니다. 따라서 iOS 가상 키보드가 팝업되면 문제가 발생한 것 같습니다.

iframe의 위치를 ​​기록하는 콘솔 (예 :)을 통해 발생하는 상황에 대한 가시성을 얻었 $('#subscribe-popup-frame', window.parent.document).position()으며 거기에서 iOS가 요소의 위치를{top: -x, left: 0} 가 가상 키보드가 팝업 될 때 (예 : 입력 요소에 초점을 맞춘) .

그래서 내 솔루션은 그 성가신을 가져 와서 -x부호 를 뒤집은 다음 jQuery를 사용하여top 위치를 iframe에 다시 었습니다. 더 나은 해결책이 있다면 나는 그것을 듣고 싶지만 12 가지 다른 접근법을 시도한 후에 그것은 나를 위해 일한 유일한 방법이었습니다.

단점 :x iOS가 요소의 위치로 장난을 치른 후 최종 값을 캡처했는지 확인하기 위해 500ms의 시간 초과를 설정해야했습니다 (작동하지 않을 수도 있지만 안전하고 싶었습니다) . 결과적으로 경험이 매우 불안정합니다. . . 하지만 적어도 작동합니다

해결책

        var mobileInputReposition = function(){
             //if statement is optional, I wanted to restrict this script to mobile devices where the problem arose
            if(screen.width < 769){
                setTimeout(function(){
                    var parentFrame = $('#subscribe-popup-frame',window.parent.document);
                    var parentFramePosFull = parentFrame.position();
                    var parentFramePosFlip = parentFramePosFull['top'] * -1;
                    parentFrame.css({'position' : 'fixed', 'top' : parentFramePosFlip + 'px'});
                },500);
            }    
        }   

그럼 그냥 전화 mobileInputReposition처럼 뭔가를 $('your-input-field).focus(function(){})하고$('your-input-field).blur(function(){})