滚动网页输入字段以防止软键盘隐藏

Question

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

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

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

有没有人有一个简单的解决方案来达到所期望的网页效果。？

Answer 1

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

答案在这里：https://stackoverflow.com/a/25725611/5580153

我发现在我的最大宽度中添加了以下CSS :768 in媒体查询使本机移动浏览器响应滚动，而键盘处于活动状态：

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

我希望这能帮到你，或者像我这样一直在努力寻找解决方案的人。

干杯!

编辑:如果您运行的是一个类似于柔性盒布局的东西，如果您强迫高度达到自动，那么也可以通过一些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"});
}

也许有更优雅的方法来实现这一点，我相信有人会告诉我的。