iOS7 使用 Javascript 检测键盘高度

iOS7 Detect keyboard height with Javascript?

本文关键字：键盘 高度 检测 Javascript 使用 iOS7      更新时间：2023-09-26

现在这个问题之前已经出现过(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);

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

我也尝试提醒窗口.innerHeight

    alert(window.innerHeight);

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

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

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

所以答案是，我错了，无法检测到窗口。

我无法检测到更改的原因是，在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 事件中，因为此时键盘已完成动画并完全显示在页面上。在焦点上，它仍然说内部高度与没有键盘时相同。

相关文章：