iOS iPad 키보드가 열리면 고정 위치가 끊어짐

iOS iPad 키보드가 열리면 고정 위치가 끊어짐

---

"검색 양식"텍스트 상자 필드를 클릭 할 때 머리글의 위치 구분이 수정되었습니다. 페이지 상단에서 분리되고 (위에 고정되어 있음) 가상 키보드가 열리면 페이지 중간에 떠 다니기 시작합니다.

표준:

부서진:

---

이 솔루션이 정말 마음에 듭니다 ( http://dansajin.com/2012/12/07/fix-position-fixed/ ). 나는 그것을 작은 jQuery 플러그인으로 패키징하여 다음과 같이 할 수 있습니다.

• 클래스를 가져올 부모 설정
• 적용 할 요소를 설정합니다 ( "textarea"및 "select"를 잊지 마십시오).
• 부모 클래스 이름 설정
• 연결되도록 허용
• 여러 번 사용할 수 있도록 허용

코드 예 :

$.fn.mobileFix = function (options) {
    var $parent = $(this),

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

편집 : 불필요한 요소 제거

---

우리의 경우 이것은 사용자가 스크롤하자마자 스스로 수정됩니다. 그래서 이것은 우리가 스크롤을 시뮬레이션하기 위해 사용한 수정입니다.

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

---

다음은 jQuery를 사용하는 해키 솔루션입니다.

HTML :

<label for="myField">My Field:</label> <input type="text" id="myField" />

<!-- ... other markup here .... -->

<div class="ad_wrapper">my fixed position container</div>

CSS :

.ad_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
}
.unfixed {
    position: relative;
    left: auto;
    bottom: auto;
}

JS :

$(function () {
    adWrapper = $('.ad_wrapper');

    $(document).on('focusin', 'input, textarea', function() {
        adWrapper.addClass('unfixed');
    })
    .on('focusout', 'input, textarea', function () {
        adWrapper.removeClass('unfixed');
    });
});

---

지금까지 시도한 모든 솔루션은 한 가지 시나리오에 실패했습니다. 키보드가 iPhone에 표시 되 자마자 고정 상단 탐색 표시 줄이 사라집니다. 키보드가 표시되어 있어도 고정 된 요소가 동일한 위치에 고정되도록하려면 어떻게해야합니까? 아래는 키보드가 보이는 동안 페이지를 스크롤 할 때 고정 된 요소가 상단에 고정 된 상태로 유지하는 간단한 솔루션입니다 (예 : 입력 필드 안에 포커스가 있음).

// Let's assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $('#navbar');

function fixFixedPosition() {
  $navbar.css({
    position: 'absolute',
    top: document.body.scrollTop + 'px'
  });
}
function resetFixedPosition() {
  $navbar.css({
    position: 'fixed',
    top: ''
  });
  $(document).off('scroll', updateScrollTop);
}
function updateScrollTop() {
  $navbar.css('top', document.body.scrollTop + 'px');
}

$('input, textarea, [contenteditable=true]').on({
  focus: function() {
    // NOTE: The delay is required.
    setTimeout(fixFixedPosition, 100);
    // Keep the fixed element absolutely positioned at the top
    // when the keyboard is visible
    $(document).scroll(updateScrollTop);
  },
  blur: resetFixedPosition
});

데모를 보려면 iPhone에서 여기로 이동하십시오.

http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk

Here's a version using requestAnimationFrame, but it didn't appear to perform any better, so I stuck with the first version since it's simpler:

http://s.codepen.io/thdoan/debug/VpvJNX/yYMyLDLBwpRk

---

Based on this good analysis of this issue, I've used this in html and body elements in css:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

it's working great for me.

---

What you need to do is set the position of the body to fixed while the user is editing text and then restore it to static when the user is done. You can do this either on focus/blur (shown below), or if a user is opening a modal, you can do it on modal open/close.

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

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

---

수정 됨-검색 텍스트 상자를 입력 한 후 헤더를 상대 고정 위치로 되돌 리도록 해킹했습니다. 이것은 페이지가 스크롤 가능한 경우 텍스트 필드의 고정 된 위치를 깨기 때문에 iOS 가상 키보드 구현의 버그입니다. 오버플로가 숨겨져 있거나 페이지를 스크롤 할 수없는 경우 가상 키보드가 실행될 때 고정 위치가 깨지지 않습니다.

건배.

참고 URL : https://stackoverflow.com/questions/14492613/ios-ipad-fixed-position-breaks-when-keyboard-is-opened