将网页输入字段滚动到顶部防止软键盘隐藏

Question

单击输入字段时，我在移动设备上使用了一个网页，当我单击输入字段时，Android 软键盘会隐藏输入字段，我希望该字段向上滚动以在键盘上方可见。

我搜索了很多文章，其中很多都提到了 Android 清单文件，但这是一个网页，而不是应用程序。我还尝试了各种 javascript 选项，包括下面的选项，但许多浏览器似乎不喜欢 .focus 事件。它适用于 chrome，但不适用于其他许多。

jQuery(function ($) {
        $("#Litres").focus(function () {
            document.body.scrollTop = $(this).offset().top;
        });
    });

有没有人有一个简单的解决方案来实现网页的预期效果。？

Answer 1

虽然此解决方案不会自动将您的字段滚动到视图中，但我发现它解决了软键盘处于活动状态时页面不可滚动的问题。

答案线程在这里：/sf/answers/1800792801/

我发现在 max-width: 768px 媒体查询中添加以下 CSS 会使本机移动浏览器在键盘处于活动状态时响应滚动：

html { 
   overflow: auto; 
} 
body { 
   height:auto; 
   overflow: auto; 
} 
.scrollable { 
   position:inherit; 
}

我希望这对您或像我一样正在努力寻找解决方案的其他人有所帮助。

干杯!

编辑： 如果您正在运行类似 Flexbox 布局的东西，如果您强制高度自动，那么这也可以通过一些 jQuery 来实现。以下脚本将查找包含 Mobi 的用户代理（*因此这将同时针对 iOS 和 Android 设备，如果您愿意，您可以更具体地定位用户代理）并添加所需的样式。

if (/Mobi/i.test(navigator.userAgent)) {
    $('html').css({"overflow":"auto"});
    $('body').css({"height":"auto"});
    $('body').css({"overflow":"auto"});
    $('.scrollable').css({"position":"inherit"});
}

可能有更优雅的方法来实现它，我相信有人可以告诉我。