Android - 键盘覆盖输入框 - 即使在 Chrome 浏览器中答案

【问题标题】：Android - Keyboard covering input box - Even in Chrome BrowserAndroid - 键盘覆盖输入框 - 即使在 Chrome 浏览器中
【发布时间】：2017-01-23 19:49:05
【问题描述】：

是否有 HTML5 css/js 解决方案可以在软键盘出现时弹出窗口内容？

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

与shouttag.com 相比，键盘覆盖了输入框的一半。

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

更新 1：

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

【问题讨论】：

标签： javascript android css html

【解决方案1】：

好的，这就是我解决问题的方法，显然 html 锚点是特定于我的 sitch，所以您可以根据需要进行更改，重要的东西在焦点/模糊 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();
});

【讨论】：

Mike，我现在正在处理同样的问题：我的 web 响应式 webapp 的 textarea 被 Android 的弹出式键盘遮住了。调整 textarea 在屏幕上的位置真的是唯一的方法吗？
到目前为止，这是我能找到的唯一解决问题的解决方案。如果您发现更好的东西，请告诉我。