Question

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

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

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

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

Answer 1

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

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

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

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

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

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

1 个答案: