iOS7用Javascript检测键盘高度？ [英] iOS7 Detect keyboard height with Javascript?

问题描述

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

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

我尝试了什么：

  var scrollHere = currentWidget.offset（）。top; 
 //这会将页面滚动到窗口小部件的顶部，但键盘位于下方。 
 setTimeout（function（）{
 $（'html，body'）。scrollTop（scrollHere）; 
}，0）; 
  

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

我也尝试过警告window.innerHeight

< pre class =lang-js prettyprint-override> alert（window.innerHeight）;


但无论键盘是否可见，它都显示相同。

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

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

解决方案

所以答案是，我错误的是无法检测到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事件中，因为at这一点键盘完成了动画并完全显示在页面上。在焦点上它仍然表示innerHeight与没有键盘的情况相同。

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.

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

    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?

Any help would be appreciated. Thank you.

解决方案

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

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:

$(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:

$(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.

这篇关于iOS7用Javascript检测键盘高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！