jQuery Mobil sabit altbilgi, klavye görüntülendiğinde hareket ediyor

Question

Phonegap ve jQuery Mobile kullanarak bir uygulama tasarladım. Sabit altbilgi, bir açılır menüye veya metin alanına tıklayana kadar düzgün çalışır, bu da altbilginin görünmeden kaybolmasına neden olur (Android 4.0) veya görüntünün ortasına taşınır (Android 2.2 Galaxy Tab). Baska öneri?

PhoneGap Versiyon: Cordova 2.1.0
jQuery Mobile Versiyon: 1.2.0 Burada

benim kodudur:

<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed"> 
    <div data-role="navbar" class="nav-mobilyzer" data-grid="d"> 
    <h1>footer</h1>   
    </div> 
</div> 

Answer 1

Ben altbilgi görüntülenen bazı cihazlarda sorun vardı ve diğerlerinde yoktu.

var initialScreenSize = window.innerHeight; 
window.addEventListener("resize", function() { 
    if(window.innerHeight < initialScreenSize){ 
     $("[data-role=footer]").hide(); 
    } 
    else{ 
     $("[data-role=footer]").show(); 
    } 
}); 

DÜZENLEME:

Peki ya oryantasyon değişiklikleri bu benim için çalıştı bulundu?

var portraitScreenHeight; 
var landscapeScreenHeight; 

if(window.orientation === 0 || window.orientation === 180){ 
    portraitScreenHeight = $(window).height(); 
    landscapeScreenHeight = $(window).width(); 
} 
else{ 
    portraitScreenHeight = $(window).width(); 
    landscapeScreenHeight = $(window).height(); 
} 

var tolerance = 25; 
$(window).bind('resize', function(){ 
    if((window.orientation === 0 || window.orientation === 180) && 
     ((window.innerHeight + tolerance) < portraitScreenHeight)){ 
     // keyboard visible in portrait 
    } 
    else if((window.innerHeight + tolerance) < landscapeScreenHeight){ 
     // keyboard visible in landscape 
    } 
    else{ 
     // keyboard NOT visible 
    } 
}); 

Tolerans, yatay genişliğin dikey genişliğinde ve tersi olarak hatalı hesaplanmasıyla ilgilidir.

Answer 2

Tamam, bu konu bu noktada internet kadar eski, ancak yukarıdaki cevap benim için işi yapmadı.

buldum en iyi yolu, yani

var that = this; 
    $(':input').blur(function(){ 
     that.onFocusLoss(); 
    }); 

, çok özel bir sipariş fixedtoolbar() yöntemlerini çağrı ardından jquery .blur() olay için bir yöntem bağlanan ve oldu ......

onFocusLoss : function() { 
    try { 
     $("[data-position='fixed']").fixedtoolbar(); 
     $("[data-position='fixed']").fixedtoolbar('destroy'); 
     $("[data-position='fixed']").fixedtoolbar(); 
     console.log('bam'); 
    } catch(e) { 
     console.log(e); 
    } 
}, 

Answer 3

klavye böylece bir girdi odaklanmayı olduğunda açılır:

// hide the footer when input is active 
$("input").blur(function() { 
    $("[data-role=footer]").show(); 
}); 

$("input").focus(function() { 
    $("[data-role=footer]").hide(); 
}); 

Answer 4

deneyin veri saklambaç sırasında odak "=" ve ayarlayın boş dize.

Answer 5

Sen ne zaman klavye gösterileri ve ne zaman gizler ve gösteri algılamak veya buna göre altbilginizi gizleyebilirsiniz:

document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false); 
document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false); 

Answer 6

Çözümümün div altbilgisindeki başka JQUERY özelliği kullanılıyor. Data-fullscreen = bu div'a "true" eklenmesi gereken tek şeydi. Bu düzeltmenin yakın zamana kadar mevcut olmadığını biliyordum ama jqm 1.3.2 ve jq 1.9 kullanıyorum. Birisine yardım etmesi durumunda bu çözümü yayınlayacağımı düşündüm. İyi şanslar. :)