iOS 8 页面跳转输入焦点答案

【问题标题】：iOS 8 Page Jumping on Input FocusiOS 8 页面跳转输入焦点
【发布时间】：2015-09-25 16:00:14
【问题描述】：

在 iOS 8 的 Safari 上，当我关注 <input> 元素时，整个页面突然跳下，然后返回到原来的位置。我的页面布局填满了整个屏幕，不打算滚动。

这似乎与在here 和here 以及this video 中观察到的错误相同。这些情况下的解决方案是针对 Cordova 应用程序，但我不是在构建 Cordova 应用程序，我只是在为 Mobile Safari 制作一个网站。

我尝试按照建议的here 添加html, body { position: fixed; }，但没有奏效。

我会尝试使用许多人之前提供的ontouchmove 建议“禁用滚动”，但这不是用户触发的滚动，而是自动滚动。

我已尝试按照建议的here 添加onfocus="window.scrollTo(0, 0);"，但这没有用，我不希望它对该答案发表评论：

这似乎应该可以工作，但它不适用于我在 Safari 中使用 iOS 8 的 iPhone 5S。 event.preventDefault() 结合您的解决方案似乎肯定会起作用，但我仍然得到默认的滚动行为。 – 本尼 3 月 17 日 17:53

如何防止这种反弹？

【问题讨论】：

您将不得不包含一些代码来重现该问题。你不能指望我们通过一个远程链接来查找问题，即使我们这样做了，一旦页面发生变化，问题就没有意义了。
我明白，我添加了一个链接到我们的 web 应用程序，它演示了这种行为。目前正在创建最小的演示，以便我可以发布一些代码。

标签： javascript html ios css input

【解决方案1】：

试试这个，在我的情况下有效：

$(document)
    .on('focus', 'input', function(e) {
        $('body').addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $('body').removeClass('fixfixed');
    });
}

在我的例子中，当我专注于输入时，我将 Web 上的所有固定元素转换为绝对以解决 iOS 中的问题：

$(document)
    .on('focus', 'input', function(e) {
        $('body').addClass('fixfixed');
        $('*').filter(function() {
            return $(this).css("position") === 'fixed';
        }).addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $('body').removeClass('fixfixed');
        $('*').filter(function() {
            return $(this).css("position") === 'fixed';
        }).removeClass('fixfixed');
    });
}

fixfixed 类有一个位置：absolute !important;

我认为您的案例的第一个解决方案应该可以工作

【讨论】：

【解决方案2】：

我发现问题是由我们的一段代码引起的，该代码将页面的 scrollTop 设置为 0 焦点。难怪！

document.addEventListener('focusin', function (event) {
    if (event.target.tagName === 'INPUT') {
        document.body.scrollTop = 0;
    }
});

只需删除底部脚本，问题就会消失。

【讨论】：