Phonegap ios fixed input field on virtual keyboard

'm creates a phonegap app with jquery Mobile. in my application, the fixed input field is shown at the top of the virtual keyboard, this works fine in Android, but in IOS, when the virtual keyboard appears, it doesn't work.

my problem is less than this IOS Toolbar Fixed footer breaks into 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 android

screenshot in Iphone Iphone

+3


source to share





All Articles