phonegap ios fixed input field on virtual keyboard

佐手、 提交于 2019-12-12 14:24:00

问题


'm creating an phonegap application with jquery Mobile. in my app a fixed input Field appear on the top of virtual keyboard , thats work fine in android , but in IOS when virtual keyboard appears it not work.

my issue is smaller to this IOS Fixed footer toolbar breaks on virtual keyboard

js

header_height = $('.main-header').height();
footer_height = $('.footer').height();
footer_input_height = $('.fixed_bottom').height();

$('.fixed_bottom').css('bottom',footer_height+'px');
$('#messages .ui-panel-wrapper').css('padding-bottom','inherit');

$("input, textarea").blur(function() {
    $("[data-role=footer]").show('','',function(){
        $('#messages').css('padding-bottom',footer_height+'px');
        $('#messages .ui-panel-wrapper').css('padding-bottom','inherit');
        $('.fixed_bottom').css('bottom',footer_height+'px');
    });
});
$("input, textarea").focus(function() {
    $("[data-role=footer]").hide('','',function(){
        $('#messages').css('padding-bottom','0px');
        $('#messages .ui-panel-wrapper').css('padding-bottom','0px');
        $('.fixed_bottom').css('bottom','0px');                 
    });
})

CSS

#messages .fixed {
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
    display: block;
}
#messages .fixed_bottom {
    bottom: 0px;
}

screenshot in android

screenshoot in Iphone

来源:https://stackoverflow.com/questions/29968891/phonegap-ios-fixed-input-field-on-virtual-keyboard

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!