Javascript 滚动网页输入字段至顶部，防止软键盘隐藏

当我点击输入字段时，我在移动设备上使用了一个网页安卓软键盘隐藏了输入字段当我点击输入字段时，我希望字段向上滚动，以便在键盘上方可见

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

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

---

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

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

答案如下：

我发现在我的最大宽度：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"});
}

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