Định vị cố định iOS 5 và bàn phím ảo

Tôi có một trang web di động có div được ghim xuống dưới cùng của màn hình thông qua vị trí: đã sửa. Tất cả đều hoạt động tốt trong iOS 5 (Tôi đang thử nghiệm trên iPod Touch) cho đến khi tôi ở trên một trang có biểu mẫu. Khi tôi chạm vào một trường đầu vào và bàn phím ảo xuất hiện, đột nhiên vị trí cố định của div của tôi bị mất. Hiện tại div cuộn với trang miễn là có thể nhìn thấy bàn phím. Khi tôi nhấp Xong để đóng bàn phím, div sẽ trở về vị trí của nó ở cuối màn hình và tuân theo vị trí: quy tắc cố định.

Có ai khác có kinh nghiệm loại hành vi này? Đây có phải là mong đợi? Cảm ơn.

Tôi đã có vấn đề này trong ứng dụng của tôi. Đây là cách tôi đang làm việc xung quanh nó:

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

Tôi chỉ cuộn lên trên cùng và định vị nó ở đó, vì vậy người dùng iOS không nhận thấy điều gì kỳ lạ đang xảy ra. Bao bọc điều này trong một số phát hiện tác nhân người dùng để người dùng khác không có hành vi này.

Tôi gặp vấn đề với ipad hơi khác khi bàn phím ảo đẩy tầm nhìn của tôi lên màn hình. Sau đó, sau khi người dùng đóng bàn phím ảo, khung nhìn của tôi vẫn ở ngoài màn hình. Trong trường hợp của tôi, tôi đã làm một cái gì đó như sau:

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

Đây là mã chúng tôi sử dụng để khắc phục sự cố với ipad. Về cơ bản, nó phát hiện sự khác biệt giữa vị trí bù và cuộn - có nghĩa là 'cố định' không hoạt động chính xác.

$(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);
    }
});

Các yếu tố cố định vị trí đơn giản là không cập nhật vị trí của chúng khi bàn phím lên. Tôi thấy rằng bằng cách lừa Safari nghĩ rằng trang đã thay đổi kích thước, mặc dù vậy, các yếu tố sẽ tự định vị lại. Nó không hoàn hảo, nhưng ít nhất bạn không phải lo lắng về việc chuyển sang 'vị trí: tuyệt đối' và theo dõi thay đổi chính mình.

Đoạn mã sau chỉ lắng nghe khi người dùng có thể đang sử dụng bàn phím (do đầu vào đang được tập trung) và cho đến khi nghe thấy một âm thanh mờ, nó chỉ lắng nghe bất kỳ sự kiện cuộn nào và sau đó thực hiện thủ thuật thay đổi kích thước. Có vẻ như đang làm việc khá tốt cho tôi cho đến nay.

    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;
    });

Chỉ trong trường hợp ai đó xảy ra với chủ đề này như tôi đã làm trong khi nghiên cứu vấn đề này. Tôi thấy chủ đề này hữu ích trong việc kích thích suy nghĩ của tôi về vấn đề này.

Đây là giải pháp của tôi cho điều này trong một dự án gần đây. Bạn chỉ cần thay đổi giá trị của "targetElem" thành một bộ chọn jQuery đại diện cho tiêu đề của bạn.

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);
      }
};

};

Có một chút chậm trễ trong quá trình sửa lỗi vì iOS dừng thao tác DOM trong khi cuộn, nhưng nó thực hiện thủ thuật ...

Không có câu trả lời nào khác mà tôi tìm thấy cho lỗi này đã làm việc cho tôi. Tôi đã có thể khắc phục nó đơn giản bằng cách cuộn trang trở lại 34px, số lượng safari di động cuộn nó xuống. với niềm đam mê:

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

Điều này rõ ràng sẽ có hiệu lực trong tất cả các trình duyệt, nhưng nó ngăn chặn nó phá vỡ trong iOS.

Vấn đề này thực sự gây phiền nhiễu.

Tôi đã kết hợp một số kỹ thuật được đề cập ở trên và đưa ra điều này:

$(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);
});

Tôi có hai thanh điều hướng cố định (đầu trang và chân trang, sử dụng twitter bootstrap). Cả hai hành động kỳ lạ khi bàn phím lên và lạ một lần nữa sau khi bàn phím bị hỏng.

Với sửa chữa hẹn giờ / chậm trễ này, nó hoạt động. Thỉnh thoảng tôi vẫn thấy một trục trặc, nhưng dường như nó đủ tốt để hiển thị nó cho khách hàng.

Hãy cho tôi biết, nếu việc này giúp ích cho bạn. Nếu không chúng ta có thể tìm thấy một cái gì đó khác. Cảm ơn.

Tôi đã gặp vấn đề tương tự với iOS7. Các yếu tố cố định dưới cùng sẽ làm rối tung quan điểm của tôi không tập trung đúng cách.

Tất cả bắt đầu hoạt động khi tôi thêm thẻ meta này vào html của mình.

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

Phần tạo nên sự khác biệt là:

height=device-height

Hy vọng rằng sẽ giúp được ai đó.

Tôi đã Jory Cunninghamtrả lời và cải thiện nó:

Trong nhiều trường hợp, nó không chỉ là một yếu tố phát điên, mà là một số yếu tố được định vị cố định, vì vậy trong trường hợp này, targetElem phải là một đối tượng jQuery có tất cả các yếu tố cố định mà bạn muốn "sửa chữa". Ho, điều này dường như làm cho bàn phím iOS biến mất nếu bạn cuộn ...

Không cần đề cập đến bạn nên sử dụng sự kiện tài liệu SAUDOM ready này hoặc ngay trước </body>thẻ đóng .

(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');
    }
})();

Tôi có một giải pháp tương tự như @NealJMD ngoại trừ tôi chỉ thực hiện cho iOS và xác định chính xác độ lệch cuộn bằng cách đo scollTop trước và sau khi cuộn bàn phím gốc cũng như sử dụng setTimeout để cho phép cuộn gốc xảy ra:

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);
}

Tôi đã cố định vị trí cố định nội dung chính Ipad của mình theo cách này:

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);

Tôi đã có một vấn đề tương tự như @ ds111 s. Trang web của tôi đã bị bàn phím đẩy lên nhưng không di chuyển xuống khi bàn phím đóng lại.

Đầu tiên tôi đã thử giải pháp @ DS11 nhưng tôi có hai inputtrường. Tất nhiên, đầu tiên bàn phím biến mất, sau đó mờ xảy ra (hoặc một cái gì đó như thế). Vì vậy, cái thứ hai inputnằm dưới bàn phím, khi tiêu điểm chuyển trực tiếp từ đầu vào này sang đầu vào khác.

Hơn nữa, "nhảy lên" không đủ tốt cho tôi vì toàn bộ trang chỉ có kích thước của ipad. Vì vậy, tôi làm cho cuộn trơn tru.

Cuối cùng, tôi đã phải gắn trình nghe sự kiện vào tất cả các đầu vào, ngay cả những đầu vào, hiện đang bị ẩn, do đó live.

Tất cả cùng nhau tôi có thể giải thích đoạn mã javascript sau đây là: Đính kèm trình nghe sự kiện mờ sau đây vào hiện tại và tất cả tương lai inputvà textarea(=live ): Đợi một khoảng thời gian ân hạn (= window.setTimeout(..., 10)) và cuộn trơn tru lên trên (= animate({scrollTop: 0}, ...)) nhưng chỉ khi "không có bàn phím hiển thị "(= 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)
})

Xin lưu ý rằng thời gian gia hạn (= 10) có thể quá ngắn hoặc bàn phím vẫn có thể được hiển thị mặc dù không có inputhoặc textareađược tập trung. Tất nhiên, nếu bạn muốn cuộn nhanh hơn hoặc chậm hơn, bạn có thể điều chỉnh thời lượng (= 400)

thực sự đã làm việc chăm chỉ để tìm ra cách giải quyết này, trong một thời gian ngắn để tìm sự kiện tập trung và làm mờ các đầu vào, và cuộn để thay đổi có chọn lọc vị trí của thanh cố định khi các sự kiện xảy ra. Đây là khả năng chống đạn và bao gồm tất cả các trường hợp (điều hướng bằng <>, cuộn, nút thực hiện). Lưu ý id = "nav" là div chân trang cố định của tôi. Bạn có thể dễ dàng chuyển cái này sang js tiêu chuẩn, hoặc jquery. Đây là võ đường cho những người sử dụng các công cụ quyền lực ;-)

xác định (["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 );
    }

});

}); // kết thúc xác định

Đây là một vấn đề khó khăn để có được "quyền". Bạn có thể thử và ẩn chân trang trên tiêu điểm phần tử đầu vào và hiển thị mờ, nhưng điều đó không phải lúc nào cũng đáng tin cậy trên iOS. Mỗi lần như vậy (một lần trong mười, giả sử, trên iPhone 4S của tôi), sự kiện lấy nét dường như không kích hoạt (hoặc có thể có điều kiện cuộc đua) và chân trang không bị ẩn.

Sau nhiều thử nghiệm và sai sót, tôi đã đưa ra giải pháp thú vị này:

<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>

Về cơ bản: sử dụng JavaScript để xác định chiều cao cửa sổ của thiết bị, sau đó tự động tạo một truy vấn phương tiện CSS để ẩn chân trang khi chiều cao của cửa sổ co lại 10 pixel. Vì mở bàn phím thay đổi kích thước màn hình trình duyệt, điều này không bao giờ thất bại trên iOS. Bởi vì nó sử dụng công cụ CSS chứ không phải JavaScript, nó cũng nhanh hơn và mượt mà hơn nhiều!

Lưu ý: Tôi đã tìm thấy bằng cách sử dụng 'mức độ hiển thị: ẩn' ít rối mắt hơn 'hiển thị: không' hoặc 'vị trí: tĩnh', nhưng số dặm của bạn có thể thay đổi.

Làm việc cho tôi

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'});
    });
}

Trong trường hợp của chúng tôi, điều này sẽ tự khắc phục ngay khi người dùng cuộn. Vì vậy, đây là bản sửa lỗi mà chúng tôi đã sử dụng để mô phỏng cuộn blurtrên bất kỳ inputhoặc textarea:

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

Câu trả lời của tôi là nó không thể được thực hiện.

Tôi thấy 25 câu trả lời nhưng không có câu trả lời nào trong trường hợp của tôi. Đó là lý do Yahoo và các trang khác ẩn tiêu đề cố định khi bật bàn phím. Và Bing biến toàn bộ trang không thể cuộn (overflow-y: hidden).

Các trường hợp được thảo luận ở trên là khác nhau, một số có vấn đề khi cuộn, một số về tiêu cự hoặc mờ. Một số có chân trang cố định, hoặc tiêu đề. Bây giờ tôi không thể kiểm tra từng kết hợp, nhưng cuối cùng bạn có thể nhận ra rằng nó không thể được thực hiện trong trường hợp của bạn.

Tìm thấy giải pháp này trên Github.

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

Hãy chắc chắn rằng bạn có nội dung có thể cuộn.

// 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>

Thanh địa chỉ gập lại như một phần thưởng bổ sung.

Trong trường hợp bất cứ ai muốn thử điều này. Tôi đã làm việc sau đây cho tôi trên một chân trang cố định với một trường đầu vào trong đó.

<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>

Tôi có cùng một vấn đề. Nhưng tôi nhận ra rằng vị trí cố định chỉ bị trì hoãn và không bị phá vỡ (ít nhất là đối với tôi). Đợi 5-10 giây và xem div điều chỉnh trở lại dưới cùng của màn hình. Tôi tin rằng đó không phải là lỗi mà là phản hồi chậm khi bàn phím mở.

Tôi đã thử tất cả các phương pháp tiếp cận từ chủ đề này, nhưng nếu họ không giúp đỡ, họ thậm chí còn tệ hơn. Cuối cùng, tôi quyết định buộc thiết bị mất tập trung:

$(<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);
    }
});

và nó hoạt động như một lá bùa và sửa hình thức đăng nhập dính của tôi.

Xin lưu ý:

1. Mã JS ở trên chỉ để trình bày ý tưởng của tôi, để thực thi đoạn mã này, vui lòng thay thế các giá trị trong dấu ngoặc nhọn (<>) bằng các giá trị phù hợp cho tình huống của bạn.
2. Mã này được thiết kế để làm việc với jQuery v1.10.2

Đây vẫn là một lỗi lớn đối với bất kỳ trang HTML nào có Chế độ Bootstrap cao hơn trong iOS 8.3. Không ai trong số các giải pháp đề xuất ở trên làm việc và sau khi phóng to trên sân bất kỳ bên dưới nếp gấp của một phương thức cao, Mobile Safari và / hoặc WkWebView sẽ di chuyển các yếu tố cố định đến nơi cuộn cơ thể HTML đang nằm, để lại chúng lệch với nơi họ thực sự ở đâu đặt ra.

Để khắc phục lỗi, thêm trình lắng nghe sự kiện vào bất kỳ đầu vào phương thức nào của bạn như:

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

Tôi đoán điều này hoạt động vì buộc chiều cao cuộn của phần thân HTML sẽ căn chỉnh lại chế độ xem thực tế với vị trí WebView của iOS 8 mong muốn các nội dung của div phương thức cố định sẽ xuất hiện.

Nếu bất cứ ai đang tìm kiếm một tuyến đường hoàn toàn khác (như bạn thậm chí không tìm cách ghim div "chân trang" này khi bạn cuộn nhưng bạn chỉ muốn div ở cuối trang), bạn chỉ có thể đặt vị trí chân trang là quan hệ.

Điều đó có nghĩa là ngay cả khi bàn phím ảo xuất hiện trên trình duyệt trên thiết bị di động của bạn, chân trang của bạn sẽ chỉ được neo vào cuối trang, không cố gắng phản ứng với hiển thị bàn phím ảo hoặc đóng.

Rõ ràng là nó trông tốt hơn trên Safari nếu vị trí được cố định và chân trang theo dõi trang khi bạn cuộn lên hoặc xuống nhưng do lỗi lạ này trên Chrome, cuối cùng chúng tôi đã chuyển sang chỉ làm chân trang.

Không có giải pháp cuộn nào có vẻ hiệu quả với tôi. Thay vào đó, điều làm việc là đặt vị trí của cơ thể thành cố định trong khi người dùng đang chỉnh sửa văn bản và sau đó khôi phục nó thành tĩnh khi người dùng hoàn tất. Điều này giữ cho safari không cuộn nội dung của bạn trên bạn. Bạn có thể thực hiện việc này bằng cách lấy nét / làm mờ phần tử (hiển thị bên dưới cho một phần tử duy nhất nhưng có thể cho tất cả đầu vào, textareas) hoặc nếu người dùng đang làm gì đó để bắt đầu chỉnh sửa như mở một phương thức, bạn có thể làm hành động đó (ví dụ: mở / đóng phương thức).

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

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

iOS9 - vấn đề tương tự.

TLDR - nguồn gốc của vấn đề. Đối với giải pháp, cuộn xuống dưới cùng

Tôi đã có một hình thức trong một position:fixed iframe với id = 'subscribe-popup-frame'

Theo câu hỏi ban đầu, về tiêu điểm đầu vào, iframe sẽ nằm ở đầu tài liệu chứ không phải trên cùng của màn hình.

Vấn đề tương tự đã không xảy ra trong chế độ safari dev với tác nhân người dùng được đặt thành một idevice. Vì vậy, có vẻ như vấn đề là do bàn phím ảo iOS gây ra khi nó bật lên.

Tôi có thể thấy được những gì đang xảy ra khi bảng điều khiển ghi lại vị trí của iframe (ví dụ $('#subscribe-popup-frame', window.parent.document).position()) và từ đó tôi có thể thấy iOS dường như đang đặt vị trí của phần tử {top: -x, left: 0}khi bàn phím ảo bật lên (nghĩa là tập trung vào phần tử đầu vào).

Vì vậy, giải pháp của tôi là lấy cái pesky đó -x, đảo ngược dấu hiệu và sau đó sử dụng jQuery để thêm nótop vị trí trở lại iframe. Nếu có một giải pháp tốt hơn tôi rất muốn nghe nhưng sau khi thử hàng tá cách tiếp cận khác nhau thì đó là cách duy nhất hiệu quả với tôi.

Nhược điểm: Tôi cần đặt thời gian chờ là 500ms (có thể ít hoạt động hơn nhưng tôi muốn an toàn) để đảm bảo tôi đã nắm được xgiá trị cuối cùng sau khi iOS đã thực hiện sai lầm của mình với vị trí của phần tử. Kết quả là trải nghiệm rất giật. . . nhưng ít nhất nó hoạt động

Giải pháp

        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);
            }    
        }   

Sau đó, chỉ cần gọi mobileInputRepositionmột cái gì đó như $('your-input-field).focus(function(){})và$('your-input-field).blur(function(){})