iPhone Web App - 防止键盘移动/上推视图 - iOS8答案

【问题标题】：iPhone Web App - Prevent keyboard from moving/push up view - iOS8iPhone Web App - 防止键盘移动/上推视图 - iOS8
【发布时间】：2014-11-12 23:32:21
【问题描述】：

在 iOS8 之前的所有版本中，当键盘出现时，我可以通过以下方法防止 iPhone 键盘向上推（并破坏）我的 html/css/js 视图： p>

$('input, select').focus(function(event) {
        $(window).scrollTop(0);
        // or via the scrollTo function
});

从 iOS8 开始，这不再有效。一种解决方法是将此代码放在 setTimeOut 中

setTimeout(function() { $(window).scrollTop(0); }, 0);

但它只会让视图做一个抖动的动作，因为视图最初是由 iOS 向上推，然后被我的 js 代码拖回的。 preventDefault 和 stopPropagation 也无济于事。

当然，我已经尝试了网络上所有可用的方法，包括我在此处发布的自己的解决方案：How to prevent keyboard push up webview at iOS app using phonegap，但到目前为止，iOS8 没有任何效果。关于如何防止 iOS8 中的键盘推动/移动视图有什么聪明的想法吗？

【问题讨论】：

我知道这是旧的但是..你找到任何解决方案了吗？
你还需要回答吗？
有什么解决办法吗？目前面临同样的问题...

标签： javascript jquery css keyboard ios8

【解决方案1】：

在body 上尝试position:fixed，和/或将内容包装在div 和position:fixed 中。

【讨论】：

【解决方案2】：

有一些选择：

在您的 ios 代码上创建监听器，以随着键盘高度向上移动屏幕，因此所有内容都随着键盘向上移动，然后保存您的设计。
让您的 css 设计具有响应性。那么改变高度就没有问题了，它可以在你的webview中滚动。

【讨论】：

【解决方案3】：

在 iOS 中，当键盘上推视图时，会触发滚动事件（更改了$(window).scrollTop()）。您可以将$(window).scrollTop(0) 放在滚动事件处理程序中。为防止抖动运动，请在滚动期间将不透明度设置为 0。相关代码可能如下所示：

function forceScrollTop() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop != 0) {
    $(window).scrollTop(0);
    $(selector).css('opacity', 1);
    $(window).off('scroll', forceScrollTop);
  }
}
// when an input is focused ... 
$(selector).css('opacity', 0);
$(window).on('scroll', forceScrollTop);

【讨论】：