Question

示例：

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

从左到右查看下面的图像序列：

新装入的页面。
重点关注输入字段。它被虚拟键盘遮挡了。
只有用户开始输入后，输入字段才会显示。

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

有没有办法为正文指定隐藏的溢出，而不是让虚拟键盘模糊聚焦的输入字段？

Answer 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

由虚拟键盘遮挡的聚焦输入字段

1 个答案: