javascript iOS7 用 Ja​​vascript 检测键盘高度？

iOS7 Detect keyboard height with Javascript?

提问by zairon87

Now this issue has made it on here before (What is the height of iPad's onscreen keyboard?), but I think it needs a refresher due to iOS7 recently being released.

现在这个问题已经出现在这里（iPad 的屏幕键盘的高度是多少？），但我认为由于最近发布了 iOS7，它需要复习一下。

The issue:I have a fixed position modal that appears in the bottom right corner of the page. It has a single form field that gains focus when the modal opens. The focus triggers the softkeyboard to open. The problem is that I want to programatically detect the keyboard height to position the modal at the top of the keyboard, otherwise part of the modal gets cutoff from view.

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

What I've tried:

我试过的：

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

The page scrolls to the top of the modal. Not ideal because sometimes the form field is hidden below the keyboard.

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

I have also tried alerting the window.innerHeight

我也试过提醒 window.innerHeight

    alert(window.innerHeight);

But that shows up to be the same whether or not the keyboard is visible.

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

So my question is, has anyone found a way to detect the iOS7 keyboard height in JavaScript? Might there be a workaround? Unlikely, but could this be a bug in iOS7 safari?

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

Any help would be appreciated. Thank you.

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

采纳答案by zairon87

So the answer is, I was wrong about not being able to detect the window.innerHeight change.

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

The reason I couldn't detect the change was because on the iPad the keyboard animates up from the bottom and does not fire a window resize event. My solution was not to detect the window size, I made the body have a max-height of 100% when the modal is open. Then I wait for the user to focus on the text field and manipulate the scroll position at that point:

我无法检测到变化的原因是因为在 iPad 上，键盘从底部向上移动并且不会触发窗口大小调整事件。我的解决方案是不检测窗口大小，当模态打开时，我使主体的最大高度为 100%。然后我等待用户关注文本字段并在该点操纵滚动位置：

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

This is for when you focus on your input field. iOS likes to try to center the window on the field when the keyboard opens, and that can be annoying if say you have information above the input the user needs to see. The example above scrolls the window so that my text field is right above the keyboard. You'd think that's all you need to do, but iOS sometimes tries to be too smart. When the user starts typing in the input, it re-centers on the input again! So we take the above code and make it into this:

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

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

This way the scroll position never changes from where you want it while the user is typing.

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

Note: The only time I was able to detect the change in window.innerHeight was in the on keyup event because at that point the keyboard was done animating and fully shown on the page. On focus it still said the innerHeight was same as without the keyboard.

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