Android - 键盘覆盖输入框 - 即使在Chrome浏览器中也是如此 [英] Android - Keyboard covering input box - Even in Chrome Browser

问题描述

当出现软键盘时，是否有HTML5 css / js解决方案来提升窗口内容？

Is there an HTML5 css/js solution to bump up the window content when the soft keyboard appears?

例如，如果您打开 duckduckgo.com Android设备并在输入字段中输入文本，当软键盘出现时它会使内容颠倒，因此它不会覆盖输入框。

For example, if you open up duckduckgo.com on an android device and enter text in the input field, when the soft keyboard appears it bumps the content up so it doesn't cover the input box.

将其与 shouttag.com ，其中键盘覆盖输入框的一半。

Compare that to shouttag.com where the keyboard covers half the input box.

这种情况发生在我们的webview原生应用上，但在通过Chrome查看网站时也会发生这种情况。

This occurs on our webview native app, but it also happens when viewing the site through chrome.

更新1：

看起来像fullpage.js api可能是罪魁祸首，挖掘更多。

Looks like the fullpage.js api might be the culprit, digging more.

推荐答案

好的，这就是我修复问题的方法，显然html锚是特定于我的sitch，所以你可以根据需要改变，重要的东西是焦点/模糊和fxs。

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();
});

这篇关于Android - 键盘覆盖输入框 - 即使在Chrome浏览器中也是如此的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！