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

Posted 2023-05-09

【中文标题】将网页输入字段滚动到顶部防止被软键盘隐藏

【英文标题】：Scroll Webpage input Field to Top prevent hide by Soft Keyboard

【发布时间】：2016-04-13 04:14:32

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

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

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