Skip to content Skip to sidebar Skip to footer

Android - Keyboard Covering Input Box - Even In Chrome Browser

Is there an HTML5 css/js solution to bump up the window content when the soft keyboard appears? For example, if you open up duckduckgo.com on an android device and enter text in t

Solution 1:

Ok here's how I fixed0red the issue, obviously the html anchors are specific to my sitch, so you can change as necessary, the important stuff is in the focus / blur anon fxs.

var $fpContainerWrap    = jQuery('.home-wrap .fp-tableCell div');
var $homeWrap           = jQuery('.home-wrap');

var topOffsetRaw = $fpContainerWrap.offset().top - jQuery(window).scrollTop();

var topOffset = '-' + (topOffsetRaw * 1.5) + 'px';

$('input').focus(function() { 

     $("#menu").animate({ top:topOffset }, "fast");
     $homeWrap.animate({ top:topOffset }, "fast");
     $('#section-changer').hide();
});

$('input').blur(function() {

    $("#menu").animate({ top:0 }, "fast");
    $homeWrap.animate({ top:0 }, "fast");
    $('#section-changer').show();
});

Post a Comment for "Android - Keyboard Covering Input Box - Even In Chrome Browser"