javascript - iOS7 使用 Javascript 检测键盘高度？

Question

现在这个问题已经出现在这里 ( What is the height of iPad's onscreen keyboard? )，但由于最近发布了 iOS7，我认为它需要复习一下。

问题:我有一个固定位置模态出现在页面的右下角。它有一个单一的表单字段，当模态打开时它会获得焦点。焦点触发软键盘打开。问题是我想以编程方式检测键盘高度以将模态定位在键盘顶部，否则模态的一部分会从 View 中 chop 。

我尝试过的:

    var scrollHere = currentWidget.offset().top;
    //this scrolls the page to the top of the widget, but the keyboard is below.
    setTimeout(function() {
        $('html, body').scrollTop(scrollHere);
    }, 0);

页面滚动到模式的顶部。不太理想，因为有时表单域隐藏在键盘下方。

我也试过提醒 window.innerHeight

    alert(window.innerHeight);

但无论键盘是否可见，结果都是一样的。

所以我的问题是，有没有人找到在 JavaScript 中检测 iOS7 键盘高度的方法？可能有解决方法吗？不太可能，但这会不会是 iOS7 Safari 中的错误？

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

所以答案是，我无法检测到 window.innerHeight 的变化是错误的。

我无法检测到更改的原因是因为在 iPad 上，键盘从底部向上动画并且不会触发窗口调整大小事件。我的解决方案是不检测窗口大小，当模态打开时，我让主体的最大高度为 100%。然后我等待用户将注意力集中在文本字段上并在此时操纵滚动位置:

$(document.body).on('focus', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

这是在您专注于输入字段时使用的。 iOS 喜欢尝试在键盘打开时将窗口居中放置在字段上，如果说您在用户需要查看的输入上方有信息，这可能会很烦人。上面的示例滚动窗口，以便我的文本字段位于键盘正上方。您可能认为这就是您需要做的全部，但 iOS 有时会显得过于聪明。当用户开始输入时，它会再次以输入为中心!所以我们把上面的代码变成这样:

$(document.body).on('focus keyup', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

这样，当用户输入时，滚动位置永远不会从您想要的位置改变。

注意:我唯一一次能够检测到 window.innerHeight 的变化是在 on keyup 事件中，因为此时键盘已完成动画并完全显示在页面上。在焦点上它仍然说 innerHeight 与没有键盘时相同。