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

2019年7月27日 109次阅读

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

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

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

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

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

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

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

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

可能有更优雅的方式来实现它,我相信有人可以填补我.

点赞