滚动网页输入框到顶部，以防止被软键盘遮挡。

Question

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

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

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

有没有简单的解决方案可以实现网页所需的效果？

- user552769

Answer 1

虽然这个解决方案不能自动将您的字段滚动到视图中，但我发现它解决了软键盘激活时页面不可滚动的问题。

答案线程在这里：https://dev59.com/YmYq5IYBdhLWcg3wkRUo#25725611

我发现在我的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"});
}

可能有更优雅的方法来实现这个目标，我相信有人可以为我填补这方面的知识空白。

- Aaron Lavers