1. 技术文章
  2. Phonegap JQM Fixed Position Header/Footer Moves After Dismissing iOS Keyboard

Phonegap JQM Fixed Position Header/Footer Moves After Dismissing iOS Keyboard

由 不打扰是莪最后的温柔 提交于 2019-12-01 19:39:35
pablobart

I had a similar problem I fixed with this:

/* iOS keyboard popup somehow leaves page scrolled, unscroll it */
$.mobile.silentScroll(0);

I've found the solution in http://forum.jquery.com/topic/phonegap-jqm-fixed-position-header-footer-moves-after-dismissing-ios-keyboard

Take a look at this solution.

This was reported as a jQM bug but it still in jQM 1.3.2.

Try this solution which works for me, taken from the thread noted below.

// Workaround for buggy header/footer fixed position when virtual keyboard is on/off
$('input, textarea')
.on('focus', function (e) {
    $('header, footer').css('position', 'absolute');
})
.on('blur', function (e) {
    $('header, footer').css('position', 'fixed');
    //force page redraw to fix incorrectly positioned fixed elements
    setTimeout( function() {
        window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
    }, 20 );
});

Other solutions are posted here. It is a worth looking thread: https://github.com/jquery/jquery-mobile/issues/5532

This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition), and the footer does not get hidden.

After much trial and error, I came up with this interesting solution:

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

Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!

Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.

The best solution i found for this problem is use this plugin: ( input blur not working so well )

ionic-plugins-keyboard

 bindViewEvents: function () {
    var context = this;
    window.addEventListener('native.showkeyboard', context.keyboardShowHandler);

    window.addEventListener('native.hidekeyboard', context.keyboardHideHandler);
},
keyboardHideHandler: function (e) {
    var context = this;
    $(".ui-footer[data-role='footer']").show();
},
keyboardShowHandler: function (e) {
    var context = this;
    $(".ui-footer[data-role='footer']").hide();
}

I just test it, it works.

         $(document).on('focus','input', function() {
         setTimeout(function() {
                    $('#footer1').css('position', 'absolute');
                    $('#header1').css('position', 'absolute');
         }, 0);
         });
         $(document).on('blur','input', function() {
         setTimeout(function() {
                               $('#footer1').css('position', 'fixed');
                               $('#header1').css('position', 'fixed');
         }, 800);
         });
标签
jquery
cordova
header
footer
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!