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

Question

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

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

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

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

Answer 1

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

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

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

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

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

干杯!

编辑:这也可以通过一些 jQuery 来实现，如果您正在运行类似 flexbox 布局的东西，如果您强制高度为自动，该布局就会中断。以下脚本将查找包含 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"});
}

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