iOS7如何用Javascript检测键盘高度？

Question

iOS7如何用Javascript检测键盘高度？

18

这个问题以前已经在这里提过了 (What is the height of iPad's onscreen keyboard?)，但我认为由于最近发布了 iOS7，这个问题需要重新提一下。

问题： 我有一个固定位置的模态框，出现在页面的右下角。它有一个单独的表单字段，在模态框打开时获得焦点。焦点触发软键盘的打开。问题是我想通过编程检测键盘高度来将模态框定位在键盘顶部，否则模态框的某些部分将被遮挡。

我尝试过的方法：

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

页面滚动到模态框顶部。这并不理想，因为有时表单字段会被键盘遮挡。我还尝试过弹出窗口内的窗口.innerHeight。

    alert(window.innerHeight);

但是这个问题似乎无论键盘是否可见，都是相同的。

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

任何帮助将不胜感激。谢谢。

- zairon87

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zairon87 · Accepted Answer

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

不能检测到这种变化的原因是在iPad上，键盘从底部向上动画显示，并不触发窗口大小调整事件。我的解决方法不是检测窗口大小，而是当模态框打开时使body具有最大高度为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);
});

这样，当用户输入时，滚动位置始终保持在您想要的位置。

注意：我只能在keyup事件中检测到window.innerHeight的更改，因为此时键盘已完成动画，并完全显示在页面上。在焦点上，它仍然显示innerHeight与没有键盘时相同。