iOS7用Javascript检测键盘高度？

Question

现在这个问题已经在这里发布了(iPad屏幕键盘的高度是多少？),但我认为由于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);

页面滚动到模态的顶部.不理想,因为有时表单字段隐藏在键盘下方.

我也试过提醒窗口.内心高度

    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事件中,因为此时键盘已完成动画并完全显示在页面上.焦点仍然表示内心高度与没有键盘的情况相同.