iOS 5 sabit konumlandırma ve sanal klavye

Sabit bir web sitem var pozisyon ile ekranın altına sabitlenmiş bir div var: sabit. Formlu bir sayfada bulunana kadar iOS 5'de (iPod Touch üzerinde test ediyorum) tüm işler iyi çalışıyor. Bir giriş alanına dokunduğumda ve sanal klavye göründüğünde, aniden div'ımın sabit konumu kayboluyor. Div, klavye görünür olduğu sürece sayfa ile birlikte kayar. Klavyeyi kapatmak için Bitti'yi tıklattığımda, div ekranın altındaki konumuna geri döner ve position: fixed kuralına uyar.

Başka kimse bu tür davranışlar yaşadı mı? Bu bekleniyor mu? Teşekkürler.

Başvurumda bu sorun vardı. İşte nasıl çalışıyorum:

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

Sadece en üste kaydırıyorum ve orada konumlandırıyorum, bu yüzden iOS kullanıcısı garip bir şey fark etmiyor. Bunu bazı kullanıcı aracısı algılamasına sarın, böylece diğer kullanıcılar bu davranışı alamazlar.

Sanal klavyenin görüntü penceremi ekran dışına ittiği biraz farklı bir ipad sorunum vardı. Sonra kullanıcı sanal klavyeyi kapattıktan sonra görünümüm hala ekran dışındaydı. Benim durumumda aşağıdaki gibi bir şey yaptım:

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

Bu, ipad ile ilgili sorunu çözmek için kullandığımız koddur. Temel olarak ofset ve kaydırma konumu arasındaki tutarsızlıkları algılar - bu da 'sabit' düzgün çalışmadığı anlamına gelir.

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

Sabit konumlu elemanlar klavye yukarıdayken konumlarını güncellemez. Yine de Safari'yi sayfanın yeniden boyutlandırıldığını düşünerek kandırarak öğelerin kendilerini yeniden konumlandıracağını buldum. Mükemmel değil, ama en azından 'pozisyon: mutlak' konumuna geçmek ve değişiklikleri izlemek konusunda endişelenmenize gerek yok.

Aşağıdaki kod, kullanıcının klavyeyi kullanması muhtemel olduğunda (odaklanan bir giriş nedeniyle) ve bulanıklığı duyana kadar sadece kaydırma olaylarını dinler ve ardından yeniden boyutlandırma hizasını dinler. Şimdiye kadar benim için oldukça iyi çalışıyor gibi görünüyor.

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

Bu konuyu araştırırken yaptığım gibi birisinin bu konuya gelmesi durumunda. Bu konuyu bu konudaki düşüncemi teşvik etmede yararlı buldum.

Bu benim yeni bir projede bunun için benim çözümümdü. Yalnızca "targetElem" değerini, başlığınızı temsil eden bir jQuery seçicisiyle değiştirmeniz gerekir.

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

};

Düzeltme bekletmede biraz gecikme var çünkü iOS kaydırma sırasında DOM manipülasyonunu durduruyor, ancak hile yapıyor ...

Bu hata için bulduğum diğer cevapların hiçbiri benim için çalışmadı. Sayfayı 34 piksel kadar yukarı kaydırarak düzeltebilirdim, mobil safari miktarı aşağı kaydırır. jquery ile:

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

Bu, tüm tarayıcılarda etkili olacaktır, ancak iOS'ta kırılmasını önler.

Bu konu gerçekten sinir bozucu.

Yukarıda bahsedilen tekniklerden bazılarını birleştirdim ve bununla geldim:

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

İki sabit gezinme çubuğum var (twitter bootstrap kullanarak üstbilgi ve altbilgi). Her ikisi de klavye açıkken garip davrandı ve klavye kapatıldıktan sonra tekrar garip davrandı.

Bu zamanlanmış / gecikmeli düzeltme ile çalışır. Hala arada bir aksaklık buluyorum, ancak bunu müşteriye göstermek için yeterince iyi görünüyor.

Bunun sizin için işe yarayıp yaramadığını bana bildirin. Değilse başka bir şey bulabiliriz. Teşekkürler.

İOS7 ile aynı sorunu yaşıyordum. Sabit alt elemanlar, düzgün odaklanmadığımı düşünürüm.

Tüm bu meta etiketi html'ime eklediğimde çalışmaya başladı.

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

Farkı yaratan kısım:

height=device-height

Umarım birine yardım eder.

Jory CunninghamCevap aldım ve geliştirdim:

Çoğu durumda, sadece çıldırmış bir öğe değil, aynı zamanda birkaç sabit konumlandırılmış öğe, bu durumda bu durumda, targetElem"düzeltmek" istediğiniz tüm sabit öğeleri içeren bir jQuery nesnesi olmalıdır. Ho, bu kaydırdığınızda iOS klavyesini ortadan kaldırıyor gibi görünüyor ...

Bahsetmeye gerek yok, bu SONRA belge DOM readyetkinliğini veya kapanış </body>etiketinden hemen önce kullanmalısınız .

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

Benim sadece iOS için yürütür ve yerel klavye kaydırma önce ve sonra scollTop ölçmek yanı sıra yerel kaydırma gerçekleşmesine izin vermek için setTimeout kullanarak kaydırma ofset doğru belirler @ @NealJMD benzer bir çözüm var:

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 ana düzen içeriğimi sabit konumumu şu şekilde sabitledim:

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 s ile benzer bir sorun yaşadım. Web sitem klavye tarafından yukarı itildi, ancak klavye kapandığında aşağı hareket etmedi.

Önce @ ds111 çözümünü denedim ama iki alanım vardı input. Tabii ki, önce klavye kaybolur, sonra bulanıklık olur (veya bunun gibi bir şey). Böylece inputodak doğrudan bir girişten diğerine geçtiğinde klavyenin altındaydı.

Ayrıca, tüm sayfa sadece ipad boyutuna sahip olduğundan, "yukarı atlamak" benim için yeterince iyi değildi. Bu yüzden kaydırmayı düzgünleştirdim.

Son olarak, olay dinleyicisini, şu anda gizlenmiş olan tüm girişlere, dolayısıyla live.

Hep birlikte aşağıdaki javascript snippet'ini şu şekilde açıklayabilirim: Aşağıdaki bulanıklaştırma olay dinleyicisini geçerli ve tüm geleceğe ekleyin inputve textarea(= live): Ek süre (= window.setTimeout(..., 10)) bekleyin ve sorunsuz bir şekilde yukarı (= animate({scrollTop: 0}, ...)) kaydırın, ancak yalnızca "klavye yoksa gösterilir "(= 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)
})

Yetkisiz kullanım süresinin (= 10) çok kısa olabileceğini inputveya textareaodaklanmasa da odaklanmasa da klavyenin gösterilebileceğini unutmayın . Tabii ki, daha hızlı veya daha yavaş kaydırmayı istiyorsanız, süreyi (= 400) ayarlayabilirsiniz.

girişlerde odak ve bulanıklık olaylarını arayan ve olaylar gerçekleştiğinde sabit çubuğun konumunu seçici olarak değiştirmek için kaydırılan bu geçici çözümü bulmak için gerçekten çok çalıştı. Bu kurşun geçirmezdir ve tüm durumları kapsar (<> ile gezinme, kaydırma, tamam düğmesi). Not id = "nav" sabit altbilgim div. Bunu standart js veya jquery'ye kolayca bağlayabilirsiniz. Bu elektrikli el aletleri kullananlar için dojo ;-)

define (["dojo / ready", "dojo / query",], işlev (hazır, sorgu) {

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

});

}); // bitiş tanımla

Bu 'doğru' olmak için zor bir sorundur. Alt öğe giriş öğesi odağında gizlenmeyi deneyebilir ve bulanıklıkta gösterebilirsiniz, ancak bu iOS'ta her zaman güvenilir değildir. Her sıklıkta (her 10'da bir, örneğin, iPhone 4S'imde) odak olayı tetiklenemiyor (veya belki de bir yarış durumu var) ve altbilgi gizlenmiyor.

Çok fazla deneme yanılma sonrasında bu ilginç çözümü buldum:

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

Temel olarak: cihazın pencere yüksekliğini belirlemek için JavaScript kullanın, ardından pencerenin yüksekliği 10 piksel küçüldüğünde altbilgiyi gizlemek için dinamik olarak bir CSS medya sorgusu oluşturun. Klavyeyi açmak tarayıcı ekranını yeniden boyutlandırdığından bu iOS'ta asla başarısız olmaz. JavaScript yerine CSS motorunu kullandığı için çok daha hızlı ve akıcı!

Not: 'Görünürlük: gizli' ifadesini 'display: none' veya 'position: static' ifadesinden daha az kusurlu buldum, ancak kilometreniz değişebilir.

Benim için çalışıyor

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

Bizim durumumuzda, bu kullanıcı kaydırır kaydırmaz kendini düzeltir. Bunun üzerinde bir kaydırma simüle etmek kullanıyorum düzeltmedir Yani blurherhangi inputveya textarea:

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

Cevabım bunun yapılamayacağı.

25 cevap görüyorum ama benim durumumda hiçbiri işe yaramıyor. Bu nedenle Yahoo ve diğer sayfalar klavye açıkken sabit başlığı gizler. Bing tüm sayfayı kaydırılamaz hale getirir (taşma-y: gizli).

Yukarıda tartışılan vakalar farklıdır, bazıları kaydırma yaparken, bazıları odakta veya bulanıklıkta sorunları vardır. Bazılarının sabit altbilgisi veya başlığı vardır. Şimdi her kombinasyonu test edemiyorum, ancak sizin durumunuzda yapılamayacağını fark edebilirsiniz.

Bu çözümü Github'da buldu.

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

Kaydırılabilir içeriğiniz olduğundan emin olun.

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

Adres çubuğu ek bir bonus olarak katlanır.

Herkes bunu denemek isterse. Benim için bir giriş alanı olan sabit bir altbilgi üzerinde çalışan aşağıdaki var.

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

Bende aynı sorun var. Ama sabit pozisyonun sadece geciktiğini ve kırılmadığını fark ettim (en azından benim için). 5-10 saniye bekleyin ve div'in ekranın altına ayarlanıp ayarlanmadığını görün. Bunun bir hata değil, klavye açıkken gecikmeli bir yanıt olduğuna inanıyorum.

Bu konudaki tüm yaklaşımları denedim, ancak yardımcı olmadılarsa, daha da kötüleştiler. Sonunda, cihazı odaklanmaya zorlamaya karar verdim:

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

ve bir cazibe gibi çalıştı ve yapışkan giriş formumu düzeltti.

Lütfen NOT:

1. Yukarıdaki JS kodu sadece fikrimi sunmak, bu pasajı yürütmek için lütfen açısal parantez (<>) içindeki değerleri durumunuza uygun değerlerle değiştirin.
2. Bu kod, jQuery v1.10.2

Bu, iOS 8.3'te daha uzun Bootstrap Modals içeren HTML sayfaları için hala büyük bir hata. Yukarıdaki önerilen çözümlerin hiçbiri işe yaramadı ve uzun bir modun katının altındaki herhangi bir alana yakınlaştırma yaptıktan sonra, Mobil Safari ve / veya WkWebView, sabit öğeleri HTML gövdesinin kaydırmasının bulunduğu yere taşıyacak ve gerçekte nerede olduklarını yanlış hizalayacaktır. ortaya koydu.

Hataya geçici bir çözüm bulmak için aşağıdaki gibi kalıcı girdilerinize bir olay dinleyicisi ekleyin:

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

HTML gövdesinin kaydırma yüksekliğini, iOS 8 WebView sabit modal div içeriğinin olmasını beklediği yerle gerçek görünümü yeniden hizaladığı için bu işe yaradığını tahmin ediyorum.

Herhangi biri tamamen farklı bir rota arıyorsa (kaydırma sırasında bu "altbilgi" div'ini sabitlemek istemiyorsanız, ancak div'in sayfanın altında kalmasını istiyorsanız), altbilgi konumunu şu şekilde ayarlayabilirsiniz: göreceli.

Bu, sanal klavye mobil tarayıcınızda görünse bile, altbilginizin sanal klavye şovuna tepki vermeye veya kapatmaya çalışmak yerine sayfanın altına sabit kalacağı anlamına gelir.

Açıkçası, konum sabitse ve alt sayfa yukarı veya aşağı kaydırdıkça sayfayı takip ederse Safari'de daha iyi görünüyor, ancak Chrome'daki bu garip hata nedeniyle, altbilgiyi göreli hale getirmeye başladık.

Kaydırma çözümlerinden hiçbiri benim için işe yaramadı. Bunun yerine, kullanıcı metin düzenlerken gövdenin konumunu sabit olarak ayarlamak ve daha sonra kullanıcı tamamlandığında statik durumuna geri döndürmektir. Bu, safarinin içeriğinizi size kaydırmasını engeller. Bunu, öğelerin odaklanması / bulanıklaştırılması (aşağıda tek bir öğe için gösterilir, ancak tüm girdiler, tekdüze için olabilir) veya bir kullanıcı bir modal açmak gibi düzenlemeye başlamak için bir şey yapıyorsa, bunu yapabilirsiniz. bu eylemde (örneğin, modal açma / kapama).

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

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

iOS9 - aynı sorun.

TLDR - sorunun kaynağı. Çözüm için aşağı kaydırın

Bir position:fixediframe içinde id = 'abone-popup-frame' ile bir form vardı

Orijinal soruya göre, giriş odağında iframe, ekranın üst kısmının aksine belgenin üst kısmına gider.

Aynı sorun, kullanıcı aracısı bir aralığa ayarlanmış olarak safari geliştirici modunda oluşmadı. Görünüşe göre bu sorun ortaya çıktığında iOS sanal klavyesinden kaynaklanıyor gibi görünüyor.

Konsolun iframe'in konumunu günlüğe kaydederek (ör. $('#subscribe-popup-frame', window.parent.document).position()) Neler olduğuna ilişkin biraz görünürlük elde ettim ve oradan iOS'un öğenin konumunu ayarladığını görebiliyordum{top: -x, left: 0} kaydederek sanal klavye açıldığında (yani giriş öğesine odaklanmış) .

Benim çözümüm o sinir bozucu almak -x, işareti tersine çevirmek ve sonra eklemek için jQuery kullanmak oldutop konumu iframe . Daha iyi bir çözüm varsa duymak isterim ama bir düzine farklı yaklaşımı denedikten sonra benim için işe yarayan tek şey buydu.

Dezavantajı:x iOS öğenin konumuyla ilgili kötülüklerini yaptıktan sonra nihai değeri yakaladığımdan emin olmak için 500 ms'lik bir zaman aşımı ayarlamam gerekiyordu (belki daha az işe yarayacaktı ama güvende olmak istedim) . Sonuç olarak, deneyim çok sarsıntılı. . . ama en azından işe yarıyor

Çözüm

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

Sonra sadece çağrı mobileInputRepositiongibi bir şey içinde $('your-input-field).focus(function(){})ve$('your-input-field).blur(function(){})