被虚拟键盘遮挡的集中输入字段答案

【问题标题】：Focused input field obscured by virtual keyboard被虚拟键盘遮挡的集中输入字段
【发布时间】：2016-12-11 14:59:43
【问题描述】：

例子：

<!DOCTYPE html>
<title>Test</title>
<body style="position: relative; overflow: hidden;">
  <input type="text" style="position: absolute; top: 420px;">
</body>

请看下面的图片顺序，从左到右：

新加载的页面。
输入字段聚焦。它被虚拟键盘遮住了。
只有在用户开始输入后，输入字段才会可见。

删除overflow: hidden 使输入字段在焦点上可见，我认为这对用户更友好。

有没有办法为正文指定隐藏溢出，并且不让虚拟键盘遮挡焦点输入字段？

【问题讨论】：

标签： html css mobile touch firefox-os

【解决方案1】：

我通过动画解决了屏幕键盘的模糊输入和滚动页面

    var headerHeight = $("header").outerHeight(true);
    $(document).on('focus', 'input:not([name=option]),select,textarea', function (e) {
        $("html").animate({ scrollTop: $(e.target).offset().top - (headerHeight + 30) }, 500);
    });

您也可以使用这些功能

scrollIntoView scrollIntoViewIfNeeded

【讨论】：